用 CSS 实现元素垂直居中，有哪些好的方案？

旧城等待， 2023-06-11 03:23 17阅读 0赞

**DIV居中的经典方法**

**1. 实现DIV水平居中**

设置DIV的宽高，使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。

1 div{
    2     width: 100px;
    3     height: 100px;
    4     margin: 0 auto;
    5 }

![590739-20171206160222159-1027916572.png][]   缺点：需要设置div的宽度

**2. 实现DIV水平、垂直居中**

要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。

1 div{
    2     width: 100px;
    3     height: 100px;
    4     position: absolute;
    5     left: 50%;
    6     top: 50%;
    7     margin: -50px 0 0 -50px;
    8 }

![590739-20171206160135894-1628772732.png][]  缺点：需要设置position属性，网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中

**3. 文本在DIV中水平、垂直居中（text-align ** ** line-height）**

1）text-align 属性规定（块级）元素内文本的水平对齐方式。

![590739-20171206160851034-189847745.png][]

2）line-height = height，行高等于元素高度，用来实现垂直居中。

1 div{
    2     width:200px;height:200px;  /*设置div的大小*/
    3     border:1px solid green;    /*边框*/
    4     text-align: center;        /*文字水平居中对齐*/
    5     line-height: 200px;        /*设置文字行距等于div的高度*/
    6     overflow:hidden;
    7 }

![590739-20171206155821050-942709533.png][]

--------------------

# 用 CSS 实现元素垂直居中，有哪些好的方案？ #

作者：徐尤熙  
链接：https://www.zhihu.com/question/20543196/answer/89218605  
来源：知乎  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

**水平居中方案：**  
水平居中设置  
1、行内元素  
设置 text-align:center  
2、定宽块状元素  
设置 左右 margin 值为 auto  
3、不定宽块状元素  
a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto  
b:给该元素设置 displa:inine 方法  
c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%  
垂直居中设置  
1、父元素高度确定的单行文本  
设置 height = line-height  
2、父元素高度确定的多行文本  
a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle  
b:先设置 display:table-cell 再设置 vertical-align:middle  
  
在前端面试中，大都会问你div居中的方法：  
  
**今天我们就细数一下几种方法：**  
1，使用position:absolute,设置left、top、margin-left、margin-top的属性  
  
**.one\{  
position:absolute;  
width:200px;  
height:200px;  
top:50%;  
left:50%;  
margin-top:-100px;  
margin-left:-100px;  
background:red;  
\}**  
这种方法基本浏览器都能够兼容，不足之处就是需要固定宽高。  
2，使用position:fixed,同样设置left、top、margin-left、margin-top的属性  
  
**.two\{  
position:fixed;  
width:180px;  
height:180px;  
top:50%;  
left:50%;  
margin-top:-90px;  
margin-left:-90px;  
background:orange;  
\}**  
大家都知道的position:fixed,IE是不支持这个属性的  
3，利用position:fixed属性，margin:auto这个必须不要忘记了。  
  
**.three\{  
position:fixed;  
width:160px;  
height:160px;  
top:0;  
right:0;  
bottom:0;  
left:0;  
margin:auto;  
background:pink;  
\}**  
4，利用position:absolute属性，设置top/bottom/right/left  
  
**.four\{  
position:absolute;  
width:140px;  
height:140px;  
top:0;  
right:0;  
bottom:0;  
left:0;  
margin:auto;  
background:black;  
\}**  
5，利用display:table-cell属性使内容垂直居中  
  
**.five\{  
display:table-cell;  
vertical-align:middle;  
text-align:center;  
width:120px;  
height:120px;  
background:purple;  
\}**  
6，最简单的一种使行内元素居中的方法，使用line-height属性  
  
**.six\{  
width:100px;  
height:100px;  
line-height:100px;  
text-align:center;  
background:gray;  
\}**  
这种方法也很实用，比如使文字垂直居中对齐  
  
7，使用css3的display:-webkit-box属性，再设置-webkit-box-pack:center/-webkit-box-align:center  
  
**.seven\{  
width:90px;  
height:90px;  
display:-webkit-box;  
\-webkit-box-pack:center;  
\-webkit-box-align:center;  
background:yellow;  
color:black;  
\}**  
8，使用css3的新属性transform:translate(x,y)属性  
  
**.eight\{  
position:absolute;  
width:80px;  
height:80px;  
top:50%;  
left:50%;  
transform:translate(-50%,-50%);  
\-webkit-transform:translate(-50%,-50%);  
\-moz-transform:translate(-50%,-50%);  
\-ms-transform:translate(-50%,-50%);  
background:green;  
\}**  
**这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好**  
  
9、最高大上的一种，使用:before元素  
  
**.nine\{  
position:fixed;  
display:block;  
top:0;  
right:0;  
bottom:0;  
left:0;  
text-align:center;  
background:rgba(0,0,0,.5);  
\}  
.nine:before\{  
content:'';  
display:inline-block;  
vertical-align:middle;  
height:100%;  
\}  
.nine .content\{  
display:inline-block;  
vertical-align:middle;  
width:60px;  
height:60px;  
line-height:60px;  
color:red;  
background:yellow;  
\}**

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[590739-20171206160222159-1027916572.png]: /images/20230531/0039e1577cbd4018b8e707654a4c1b38.png
[590739-20171206160135894-1628772732.png]: /images/20230531/b164cb654a424f2785839d6542b0acf5.png
[590739-20171206160851034-189847745.png]: /images/20230531/18cb9bd8105341bc8c316a74646e975d.png
[590739-20171206155821050-942709533.png]: /images/20230531/d68ff13c36184c3eadc17f6d23eca048.png

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 css实现垂直居中

在 CSS 中实现垂直居中有几种方式，这里列举几种常用的方法： 1. 使用 `display: flex` 和 `align-items: center`： .p

电玩女神/ 2024年03月27日 12:57/ 0 赞/ 109 阅读

相关用 CSS 实现元素垂直居中，有哪些好的方案？

DIV居中的经典方法 1. 实现DIV水平居中设置DIV的宽高，使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。 1 div{

旧城等待，/ 2023年06月11日 03:23/ 0 赞/ 18 阅读

相关 css实现垂直居中

1、父元素高度确定的情况下通过transform实现垂直居中  <style> .box-wrap { background-co

谁践踏了优雅/ 2022年12月22日 04:47/ 0 赞/ 199 阅读

相关 [CSS]元素水平垂直居中方法

1）父元素设置display:flex; justify-content:center; align-items:center; 2）元素position:absolute

刺骨的言语ヽ痛彻心扉/ 2022年12月08日 01:58/ 0 赞/ 231 阅读

相关 CSS实现完美垂直居中

引用：[http://www.blueidea.com/tech/web/2006/3231.asp][http_www.blueidea.com_tech_web_2006_

红太狼/ 2022年09月30日 00:36/ 0 赞/ 260 阅读

相关 CSS 幽灵元素方案垂直居中注意事项

之前，我们转载了一篇博文[CSS居中完全指南][CSS]，在这篇文章中，提到了一种使用幽灵元素方式的解决垂直居中的问题的方案。这种方案非常适合解决一些图片布局，因此我也在项

水深无声/ 2022年06月10日 11:39/ 0 赞/ 202 阅读

相关【CSS】绝对定位元素的水平居中和垂直居中

居谁的中呢，相对于谁绝对定位，就是居谁的中了。若是水平居中的话，将该绝对定位的元素添加这个样式： left: 0; right: 0; margi

柔情只为你懂/ 2022年06月07日 11:39/ 0 赞/ 301 阅读

相关 css 垂直居中方案

感谢[Humphry][]的总结 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

柔光的暖阳◎/ 2022年04月22日 13:14/ 0 赞/ 333 阅读

相关 css实现元素在当前窗口水平垂直居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

╰+攻爆jí腚メ/ 2021年12月10日 14:37/ 0 赞/ 383 阅读

相关 css实现元素水平垂直居中

1.绝对定位，利用负边距利用负边距实现子元素居中(相对于父元素(position:relative))，需已知子元素的width与height；且把子元素的positi

刺骨的言语ヽ痛彻心扉/ 2021年09月18日 16:12/ 0 赞/ 495 阅读