css居中方法

发布时间：2023-09-06 01:12责任编辑：苏小强关键词：暂无标签

方案思路：

水平居中设置

?????1、行内元素
???????????设置 ?text-align:center
?????2、定宽块状元素
???????????设置 ?左右 ?margin ?值为 ?auto
?????3、不定宽块状元素
???????????a:在元素外加入 ?table ?标签（完整的，包括 ?table、tbody、tr、td），该元素写在 ?td ?内，然后设置 ?margin ?的值为 ?auto
???????????b:给该元素设置 ?displa:inine ?方法
???????????c:父元素设置 ?position:relative ?和 ?left:50%，子元素设置 ?position:relative ?和 ?left:50%

垂直居中设置
?????1、父元素高度确定的单行文本
???????????设置 ?height = line-height
?????2、父元素高度确定的多行文本
???????????a:插入 ?table （插入方法和水平居中一样），然后设置 ?vertical-align:middle
???????????b:先设置 ?display:table-cell ?再设置 ?vertical-align:middle

代码实现：

1，使用position:absolute,设置left、top、margin-left、margin-top的属性
.one{
???????????position:absolute;
???????????width:200px;
???????????height:200px;
???????????top:50%;
???????????left:50%;
???????????margin-top:-100px;
???????????margin-left:-100px;
???????????background:red;
}
这种方法基本浏览器都能够兼容，不足之处就是需要固定宽高。

2，使用position:fixed,同样设置left、top、margin-left、margin-top的属性
.two{
?????????????position:fixed;
?????????????width:180px;
?????????????height:180px;
?????????????top:50%;
?????????????left:50%;
?????????????margin-top:-90px;
?????????????margin-left:-90px;
?????????????background:orange;
}
大家都知道的position:fixed,IE是不支持这个属性的

3，利用position:fixed属性，margin:auto这个不要忘记了
.three{
????????????position:fixed;
????????????width:160px;
????????????height:160px;
????????????top:0;
????????????right:0;
????????????bottom:0;
????????????left:0;
????????????margin:auto;
????????????background:pink;
}

4，利用position:absolute属性，设置top/bottom/right/left
.four{
???????????position:absolute;
???????????width:140px;
???????????height:140px;
???????????top:0;
???????????right:0;
???????????bottom:0;
???????????left:0;
???????????margin:auto;
???????????background:black;
}

5，利用display:table-cell属性使内容垂直居中
.five{
????????????display:table-cell;
????????????vertical-align:middle;
????????????text-align:center;
????????????width:120px;
????????????height:120px;
????????????background:purple;
}

6，最简单的一种使行内元素居中的方法，使用line-height属性
.six{
????????????width:100px;
????????????height:100px;
????????????line-height:100px;
????????????text-align:center;
????????????background:gray;
?}
这种方法也很实用，比如使文字垂直居中对齐

7，使用css3的display:-webkit-box属性，再设置-webkit-box-pack:center/-webkit-box-align:center
.seven{
????????????width:90px;
????????????height:90px;
????????????display:-webkit-box;
????????????-webkit-box-pack:center;
????????????-webkit-box-align:center;
????????????background:yellow;
????????????color:black;
}

8，使用css3的新属性transform:translate(x,y)属性
.eight{
????????????position:absolute;
????????????width:80px;
????????????height:80px;
????????????top:50%;
????????????left:50%;
????????????transform:translate(-50%,-50%);
????????????-webkit-transform:translate(-50%,-50%);
????????????-moz-transform:translate(-50%,-50%);
????????????-ms-transform:translate(-50%,-50%);
????????????background:green;
}
这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好

9、最高大上的一种，使用:before元素
.nine{
???????????position:fixed;
???????????display:block;
???????????top:0;
???????????right:0;
???????????bottom:0;
???????????left:0;
???????????text-align:center;
???????????background:rgba(0,0,0,.5);
}
.nine:before{
???????????content:‘‘;
???????????display:inline-block;
???????????vertical-align:middle;
???????????height:100%;
}
.nine .content{
???????????display:inline-block;
???????????vertical-align:middle;
???????????width:60px;
???????????height:60px;
???????????line-height:60px;
???????????color:red;
???????????background:yellow;
}

css居中方法

原文地址：http://www.cnblogs.com/zhongjuan/p/7538468.html

css居中方法

知识推荐