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

网页元素居中攻略记_(4)用CSS3属性让元素水平垂直居中

2015-05-31 11:47 489 查看

flex实现子块的完美居中

方案

父块使用

display:flex

属性,子块margin自适应即可实现

代码

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>块状元素垂直居中(已知高度)</title>
<style>
*{margin: 0;padding: 0;}
.parent{
display: flex;
height:500px;
background: #03A1FA;
}
.child{
width: 100px;
height: 100px;
margin: auto;
background: #BB3713;
}
/*
这个依赖于设置`margin`值为`auto`值，自动获取伸缩容器中剩余的空间。
所以设置垂直方向`margin`值为`auto`，可以使伸缩项目在伸缩容器的两上轴方向都完全集中。
*/
</style>
</head>
<body>
<div class="parent">
<div class="child">ff</div>
</div>
</body>
</html>

未知宽高元素实现水平垂直居中

方案

使用

transform:translate

属性来调整

代码

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>块状元素水平垂直居中(未知宽高)</title>
<style>
*{margin: 0;padding: 0;}
/*简易版reset,工作环境不推荐使用*/

#container{
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

background-color: #A4FF00;
color:rgb(33, 172, 134);
}
/*因为不知道宽高度,所以主要用translate属性拉回未知元素XY轴上的位置实现居中*/
/*若是单纯实现未知高度的元素居中,只要用到transform:translateY(-50%)即可实现*/

</style>
</head>
<body>
<div id="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae obcaecati expedita ducimus, rem laborum veniam qui quo facilis enim. Repellat blanditiis nemo, magnam, sequi illum perferendis consequatur modi maiores quaerat?</div>
</body>
</html>

flex实现页面水平垂直居中

方案

定义居中元素的父元素

justify-content

和

align-items

属性为center即可,

需要设置足够的高度,不然只有水平居中效果

代码实现

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>flex实现子块的完美居中</title>
<style>
* {
margin: 0;
padding: 0;
}

.parent {
display: flex;
justify-content: center;
align-items: center;

height:900px;
background: #03A1FA;
}

.child {
width: 100px;
height: 100px;
background: #BB3713;
}

</style>
</head>

<body>
<div class="parent">
<div class="child">啦啦德玛新亚</div>
</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 元素水平垂直居中 css3垂直居中 css3水平居中 css3水平垂直居中

相关文章推荐

新的分享

章节导航