CSS居中总结

最新推荐文章于 2024-09-04 12:52:05 发布

原创最新推荐文章于 2024-09-04 12:52:05 发布 · 422 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

CSS

本文详细介绍了CSS中水平和垂直居中的多种方法，包括行内元素、块级元素的居中方式，以及如何使用Flex布局简化居中操作。适合前端开发者阅读。

正文

水平居中

行内元素

在父元素上设置

{
    text-align: center;
}

块级元素

单个元素

宽度固定
将元素的左右margin设置为 auto

{
    margin: 0 auto;
}

宽度不固定
1. 将该元素的display属性设置为table,左右margin设置为 auto

{
    display: table;
    margin: 0 auto;
}

这里利用了table标签的宽度自适应性，即宽度由文本长度决定。原元素经过转换后变成了宽度固定的元素。

2. 将该元素的display属性设置为inline，同时在其父元素上设置text-align属性为center。

.parent {
    text-align: center;
}

.child {
    display: inline;
}

这也很好理解，将元素转换为行内元素，就可使用行内元素的居中方法。

3. 利用float和relative定位，对父元素与子元素的属性做如下设置。

.parent {
    float: left;
    postition: relative;
    left: 50%;
}

.child {
    position: relaite;
    left: -50%;
}

首先将父元素水平相对位置右移了50%，即此时父元素的左端处于中心位置。因为子元素铺满了父元素，因此子元素左端也处于中心位置。再将子元素的水平相对位置左移50%，此时相当于子元素的中心也已经居中。

多个元素

对于多个元素，无论子元素宽度是否固定，都应该优先考虑Flex布局，只用对父元素属性进行设置，就能实现居中效果。设置代码如下

.parent {
    display: flex;
    justify-content: center;
}

Flex是一个神器，关于它的更多用法，可参考阮一峰的网络日志： Flex布局教程

垂直居中

行内元素

以下针对父元素高度确定的情况。

单行文本

对父元素设置使 line-height的值与height值相等。

多行文本

对父元素的属性做如下设置

.parent {
    display: table-cell;
    vertical-align: middle;
}

块级元素

对于多个元素的垂直居中，同理应优先考虑Flex布局，以下仅考虑单个元素。

高度固定

对该元素及其父级元素的属性做如下设置

.parent {
    position: relative;
}

.child {
    height: 200px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
}

高度不固定

对该元素及其父级元素的属性做如下设置

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

水平垂直同时居中

行内元素

按照行内元素水平、垂直居中方法共同设置即可。

块级元素

宽高固定

对该元素及其父级元素的属性做如下设置。

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

宽高不固定

使用Flex布局，做如下设置。

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

结语

不同的居中方法适用于不同的场景，以上便是笔者总结掌握的方法，若有错误请帮忙指出，感激不尽。

参考文章

慕课网：水平居中总结-不定宽块状元素方法

CSS-TRICKS：Centering in CSS: A Complete Guide

Damonare： CSS居中小谈