css居中对齐怎么设置

css 居中对齐 的设置方法：1、水平居中【text-align: center 】；2、水平居中【m arg in：0 auto】；3、垂直居中【line-h ei ght】；4、使用表格，水平、垂直居中；5、弹性布局，水平、垂直居中。

本教程操作环境：windows7系统、css3版，DELL G3 电 脑。

css居中对齐的设置方法：

1、text-align:center —— 水平居中

仅对文字、图片、按钮等 行内元素 有效（dis play 设置为inline或inline-block等）进行水平居中

2、mar gin ：0 auto； —— 水平居中

仅水平居中，且对浮动元素定位无效

 .father{
           width:500px;
           height:200px;
           background-color ::  # f98769;
           overflow:hidden;//不可缺少否则margin -t op不 生效 
       }
        .son{
            width: 100px;
            height: 100px;
            margin:50px auto ;
            background-color: #ff0000;
        }

3、line-height —— 垂直居中

line-height=height ，仅对一行文字有效

4、使用表格 —— 水平、垂直居中

对td/th的align=‘center’和valign=‘middle’两属性可以水平和垂直居中

5、弹性布局 —— 水平、垂直居中

.father{
display:flex;
just IT y-content:center;
align -i tems:center;
}
.father{
display:flex;
flex-direction:column;// 改变 主轴为cross axis
justity-content:center;
}

6、使用display：table-cell —— 水平、垂直居中

对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格

.father{
    height:300px;
    background:#ccc;
    display:table-cell; /*IE8以上及Ch rom e、Firefox*/
    vert ical -align:middle; /*IE8以上及C hr ome、Firefox*/
    text-align:center;
 }
 .son{
 display:inline-block;//或是inline
 }

7、奇淫技巧——子绝父相（已知子元素 宽 高） —— 水平、垂直居中

.father{
position:relative;
}
.son{//m、n为子 盒子 宽、高的一 半 
position:absolute;
left:50%;
top:50%;
margin-left:-mpx;
margin-top:-npx;

8、未知子元素宽高 —— 水平、垂直居中

.father {
    position:relative;
}
.son {
    position:absolute;
    top:50%;
    left:50%:
    transform:translate(-50%,-50%) /*单独设置transform:translateY(-50%);*/
}

9、伪元素法 —— 垂直居中

.father{
    position: relative;
}
.father::before{
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.son{
    display: inline-block;
    vertical-align: middle;
}

相关教程推荐：CSS视频教程

以上就是css居中对齐怎么设置的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 css居中对齐怎么设置 全部内容，希望文章能够帮你解决 css居中对齐怎么设置 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css居中对齐怎么设置的详细内容...