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

水平垂直居中的几种方式

2017-12-21 22:14 435 查看
一、flex方式（适用于居中元素元素宽高未知）

<body>
<img src="images/myPage/avatar2.png">
</body>


html,body{
height: 100%;
}
body {
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
background: #aaa;
}


需要注意的是，要使图片在屏幕上水平垂直居中，必须设置html和body的高度为100%，否则只能实现水平居中（如下图），因为父元素的高度是子元素撑起来的



但是这种方式仅限于body里面只有一个子元素，如果body里面有多个div不行,因为flex布局里垂直水平居中设置是相对于所有子元素进行计算的，假设有两张图片



二、绝对定位和负边距（适用于居中元素的宽高是固定的）

img{
position: absolute;
top: 50%;
left: 50%;
margin-left: -80px; /*图片宽度的一半*/
margin-top: -80px; /*图片高度的一半*/
}


之所以要设置负边距，是因为top,left设置的是元素左上角与body左上角的距离，要使其整个元素垂直居中就要设置负边距，分别为宽高的一半



三、CSS3的transform属性（适用于居中元素元素宽高未知）

img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 100px;
border: 50px solid #fff;
background: #000;
}


translate 函数当中使用百分比是以该元素的内容区、补白(padding)、边框(border)为标准计算的，即使img元素再加一些padding和border，依然可以垂直水平居中



四、margin:auto

img{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 水平垂直居中
相关文章推荐
新的分享
章节导航