CSS居中完全指南_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS居中完全指南_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 08:55:50

Original

1312 people have browsed it

原载于 CSS-Trick，本文着重提取文中的方法，不完全翻译。如有需要，直接原文查看。

人们经常抱怨在CSS中居中元素的问题，其实这个问题其实并不复杂，只是因为方法众多，需要根据情况从众多方法中选取一个出来。接下来，我们做一个‘决定树’来帮我们把问题变的简单一点。首先你需要居中：

水平
- 需要居中 inline或者 inline-*元素（如文字或者链接）？
- 需要居中 block类的元素？
- 需要居中多个 block元素？
垂直
- 需要居中 inline或者 inline-*元素（如文字或者链接）？
- 需要居中 block类的元素？
既水平又垂直
- 固定宽高
- 不固定宽高
- 使用 flexbox

水平居中

水平居中 inline或者 inline-*元素

你可以轻松的在一个 block元素中水平居中一个 inline元素，以下代码对 inline， inline-block， inline-table和 inline-flex等有效

.parent {  text-align: center;}

Copy after login

水平居中 block类的元素

在 block元素被设定固定宽度的情况下，可以使用设置元素 margin-left和 margin-right的值为 auto的方法实现水平居中。

.child {  width: 400px;  margin: 0 auto;}

Copy after login

水平居中多个 block类的元素

通过 inline-block实现

.parent {  text-align: center;}.child {  display: inline-block;  text-align: left;}

Copy after login

通过 flexbox实现

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

Copy after login

垂直居中

垂直居中 inline或者 inline-*元素

单行

inline/text元素可以简单的用设置相同的上下 padding值达到垂直居中的目的。

.center {  pading-top: 30px;  padding-bottom: 30px;}

Copy after login

如果因为某种原因不能使用 padding的方法，你还可以设置 line-height等于 height来达到目的。

.center {  height: 100px;  line-height: 100px;  white-space: nowrap;}

Copy after login

多行

相同的上下 padding也可以适用于此种情况，如果不能生效，你可以尝试将该元素的父元素的 dispaly设置为 table，同时该元素的 dispaly设置为 table-cell，然后设置 vertical-align。

.parent {  display: table;  width: 200px;  height: 400px;}.child {  display: table-cell;  vertical-align: middle;}

Copy after login

如果上述方法不能使用，你可以尝试使用 flexbox,一个单独的 flexbox子元素可以轻易的在其父元素中居中。谨记，这种方法需要父元素有固定的高度。

.parent {  display: flex;  justify-content: center;  flex-direction: column;  height: 400px;}

Copy after login

如果上述两种方式均不能使用，你可以使用“幽灵元素”技术，这种方法采用伪元素 ::before撑开高度，文字垂直居中。

.parent {  position: relative;}.parent::before {  content: " ";  display: inline-block;  height: 100%;  width: 1%;  vertical-align: middle;}.child {  display: inline-block;  vertical-align: middle;}

Copy after login

垂直居中 block 类的元素

已知元素高度

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  height: 100px;  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */}

Copy after login

未知元素高度

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

Copy after login

使用 flexbox

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

Copy after login

既水平又垂直

固定宽高

.parent {  position: relative;}.child {  width: 300px;  height: 100px;  padding: 20px;  position: absolute;  top: 50%;  left: 50%;  margin: -70px 0 0 -170px;}

Copy after login

不固定宽高

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

Copy after login

使用 flexbox

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

Copy after login

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

CSS居中完全指南_html/css_WEB-ITnose

水平居中

水平居中 inline或者 inline-*元素

水平居中 block类的元素

水平居中多个 block类的元素

垂直居中

垂直居中 inline或者 inline-*元素

单行

多行

垂直居中 block 类的元素

已知元素高度

未知元素高度

使用 flexbox

既水平又垂直

固定宽高

不固定宽高

使用 flexbox