您的位置:首页 > Web前端 > CSS

CSS-居中

2019-06-05 22:23 1311 查看

水平居中

1. 定宽的块级元素,外边距

当被设置元素为定宽块级元素时,可以用外边距实现。

<div class="parent" >
<div class="child" >demo</div>
</div>
.child{
width:200px;
margin:0 auto;
}
2.行内元素

当被设置元素为行内元素时,可以使用此方法,不是时可以先将元素变为行内元素。再将父容器设置

text-align: center;

<div class="parent" >
<div class="child" >demo</div>
</div>
.parent {
text-align: center;
}
.child{
display:inline-block;
}
3.绝对定位

被设置元素设为绝对定位,父容器设为相对定位

<div class="parent" >
<div class="child" >demo</div>
</div>
.parent {
width: 400px;
height: 400px;
position: relative;
}
.child{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
4.Flex

Flex,意为弹性布局,用来为盒状模型提供最大的灵活性。可以简便完整响应式地实现各种页面布局。
任何一个容器都可以指定为Flex布局,行内元素也可以。
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
具体有关Flex的介绍可以看https://www.geek-share.com/detail/2747549128.html

<div class="parent" >
<div class="child" >demo</div>
</div>
.parent {
display:flex;
justify-content:center;
}
.child{
width:100px;
}

垂直居中

1. 内边距

父元素不设高度。

<div class="parent">
<span>111111</span>
</div>
.parent{
padding: 100px 0;
width:100px;
}
2. 行高 line-height

子元素是行内元素,父元素设置line-height

<div class="parent">
<span class="child">111111</span>
</div>
.parent{
height:100px;
line-height:100px;
}
3. table
<div class="parent">
<div class="child">111111</div>
</div>
.parent{
width: 100px;
height: 100px;
display: table;
}
.child{
display: table-cell;
vertical-align: middle;
}
4. 定位

被设置元素设为绝对定位,父容器设为相对定位

<div class="parent" >
<div class="child" >demo</div>
</div>
.parent {
width: 400px;
height: 400px;
position: relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
5. Flex
<div class="parent" >
<div class="child" >demo</div>
</div>
.parent {
display: flex;
align-items: center;
height: 200px;
}
.child{
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: