我要评论水平居中元素
方式一：CSS3 transform
.parent
{
position:
relative;
}
.child
{
position:
absolute;
left:
50%:
transform:
translateX(-50%);
}
方式二：flex 布局
.parent
{
display:
flex;
justify-content:
center;
}
适用于子元素为浮动，绝对定位，内联元素，均可水平居中。
居中的元素为常规文档流中的内联元素(display: inline)
常见的内联元素有：span, a, img, input, label 等等
.parent
{
text-align:
center;
}
居中的元素为常规文档流中的块元素(display: block)
常见的块元素：p, h1~h6, table, p, ul, li 等等
方式一：设置 margin
.parent
{
width:
100%;
}
.child
{
width:
600px;
height:
50px;
margin:
0
auto;
background:
#999;
}
方式二：修改为 inline-block 属性
.parent
{
text-align:
center;
}
.child
{
display:
inline-block;
}
.child
{
width:
100px;
float:
left;
position:
relative;
left:
50%;
margin-left:
-50px;
}
方式一：
.parent
{
position:
relative;
}
.child
{
position:
absolute;
width:
100px;
left:
50%;
margin-left:
-50px;
}
方式二：
.parent
{
position:
relative;
}
.child
{
position:
absolute;
width:
100px;
left:
0;
right:
0;
margin:
0
auto;
}
垂直居中元素
方式一：CSS3 transform
.parent
{
position:
relative;
}
.child
{
position:
absolute;
top:
50%;
transform:
translateY(-50%);
}
方式二：flex 布局
.parent
{
display:
flex;
align-items:
center;
}
适用于子元素为浮动，绝对定位，内联元素，均可垂直居中。
.text
{
line-height:
200px;
height:
200px;
}
方式一：
.parent
{
position:
relative;
}
.child{
position:
absolute;
top:
50%;
height:
100px;
margin-top:
-50px;
}
方式二：
.parent
{
position:
relative;
}
.child{
position:
absolute;
top:
0;
bottom:
0;
height:
100px;
margin:
auto
0;
}
水平垂直居中元素
p
{
width:
100px;
height:
100px;
margin:
auto;
position:
fixed;
//absolute
is ok
top:
0;
right:
0;
bottom:
0;
left:
0;
}
优点：
1.不仅可以实现在正中间，还可以在正左方，正右方
2.元素的宽高支持百分比 % 属性值和 min-/max- 属性
3.可以封装为一个公共类，可做弹出层
4.浏览器支持性好
.child
{
width:
100px;
height:
100px;
position:
absolute;
top:
50%;
left:
50%;
margin-left:
-50px;
margin-top:
-50px;
}
特点：
1.良好的跨浏览器特性,兼容 IE6 – IE7
2.灵活性差，不能自适应，宽高不支持百分比尺寸和 min-/max- 属性
.child
{
width:
100px;
height:
100px;
position:
absolute;
top:
50%;
left:
50%;
transform:
translate(-50%,
-50%);
}
特点：
1.内容可自适应，可以封装为一个公共类，可做弹出层
2.可能干扰其他 transform 效果
.parent
{
display:
flex;
justify-content:
center;
align-items:
center;
}
这是 CSS 布局未来的趋势。Flexbox 是 CSS3 新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题。
text
{
height:
100px;
line-height:
100px;
text-align:
center;
}
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论