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

学会这些方法，CSS居中布局那都不是事！

2018-01-14 21:52 726 查看

居中，在网页web开发的应用场景是非常广泛的，在很多时候居中的设计会更显得美观大方，同时在UI设计中也是很常用的布局手法。所以在学习css布局中，学会居中是必不可少的功课，下面我就简单的介绍在开发中经常用到的居中方法。

注：以下方法暂不考虑IE浏览器兼容的问题。

1. 字体垂直居中

文字居中是一个常见，也很基础的应用。其方法也很简单，只要设置字体的行高line-height（自行百度）和盒子的高度一致即可。水平垂直设置text-align:center 即可。

<!-- css代码 -->
<style>
h2 {
height: 100px;
border: 1px solid #cccccc;
line-height: 100px;
text-align: center;
}
</style>
<!-- html结构代码 -->
<body>
<h2>文字居中</h2>
</body>

效果图：

2. 设置margin的值为auto

如果想要一个固定宽高的盒子针对父盒子进行水平居中，可以使用margin的属性，只要设置子盒子的margin-left和margin-right的值为auto,盒子就会自动居中。

<!-- css代码 -->
<style>
div {
height: 100px;
width: 300px;
border: 1px solid #cccccc;
line-height: 100px;
text-align: center;
}
.box {
margin: 0 auto;
}
</style>
<!-- html结构代码 -->
<body>
<div class="box">
盒子居中
</div>
</body>

效果图：

3. 使用子绝父相的方式进行居中

此时如果设计有垂直需求，使用margin: 0 auto的方式就满足不了需求了。我们可以使用绝对定位和相对定位的方式来进行居中，父盒子设置：position: relative，子盒子设置，positon: absolue, 然后设置子盒子的left: 50%, top: 50%, magin-left: (等于负的自身盒子长度的一半)，margin-top: (等于负的自身盒子的高度的一半)；

<!-- css代码 -->
<style>
html,body {
height: 100%;
}
.big-box {
position: relative;
width: 100%;
height: 100%;
}
.box {
height: 100px;
width: 300px;
border: 1px solid #cccccc;
line-height: 100px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px; /* 自身盒子宽度的一半 */
margin-top: -50px;  /* 自身盒子高度的一半 */
}
</style>
<!-- html结构代码 -->
<body>
<div class="big-box">
<div class="box">
盒子居中
</div>
</div>
</body>

效果图：

4. 使用transform方法进行居中

在使用margin的方式进行居中时，需要知道盒子自身的宽高才可以设置属性，失去了代码设计的灵活性。css3新增了一个transform的属性，可以用它来代替margin的方法，在子绝父相的前提下，增加transform:translateX(-50%) translateY(-50%);这行代码即可。

<!-- css代码 -->
<style>
html,body {
height: 100%;
}
.big-box {
position: relative;
height: 100%;
}
.box {
height: 100px;
width: 300px;
border: 1px solid #cccccc;
line-height: 100px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform:translateX(-50%) translateY(-50%); /* 该属性会自动计算自身的长度，需要注意的是如果设置两个tanslate属性需要连写 */
}
</style>
<!-- html结构代码 -->
<body>
<div class="big-box">
<div class="box">
transform
盒子居中
</div>
</div>
</body>

效果图：

5. 使用flex布局实现居中

如果不考虑浏览器兼容的问题，使用flex布局来居中是非常方便，只需要加两行代码即可实现。在父盒子添加display: flex，用来声明flex布局，然后设置：justify-content: center，该属性可以实现主轴水平居中；align-items: center ，该属性可以实现侧抽垂直居中。可以根据需求进行选择。

<!-- css代码 -->
<style>
html,body {
height: 100%;
}
.big-box {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.box {
height: 100px;
width: 300px;
border: 1px solid #cccccc;
line-height: 100px;
text-align: center;
}
</style>
</head>
<!-- html结构代码 -->
<body>
<div class="big-box">
<div class="box">
flex布局
盒子居中
</div>
</div>
</body>

效果图：

6. 快速定位到浏览器中心点

有时候我们想快速地将盒子定位在浏览器的中心点的位置上，如：常用的缓存动画、过渡动画，等等。此时我们可以用子绝父相结合margin的属性来进行居中。只需要在子盒子中设置如下属性即可：left: 0; right: 0;top: 0; bottom: 0; 最后设置 margin: auto;就可以了。

<!-- css代码 -->
<style>
html,body {
height: 100%;
}
.big-box {
position: relative;
height: 100%;
}
.box {
height: 100px;
width: 300px;
border: 1px solid #cccccc;
line-height: 100px;
text-align: center;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<!-- html结构代码 -->
<body>
<div class="big-box">
<div class="box">
浏览器中心点
盒子居中
</div>
</div>
</body>
</html>

效果图：

常用的css居中布局方法就先介绍到这里了，我想学会这6种方法已经满足日常开发中使用了。

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

标签： css 布局 web开发 css居中布局 css居中

相关文章推荐

新的分享

章节导航