使用CSS让一个元素水平垂直居中 #42

YvetteLau · 2019-07-04T03:56:27Z

No description provided.

mark-0609 · 2019-07-04T06:12:44Z

设置元素样式为：
display:flex;
justify-content: center;
align-items: center;

shenshuangdao · 2019-07-04T10:23:32Z

行内元素居中 text-align: center + line-height；
弹性布局flex；
绝对定位 absolute + margin/transform/calc；

tpxiang · 2019-07-05T01:04:57Z

1、块级元素，设置宽高，需要谁居中，给其设置 margin: 0 auto;
2、行内元素：首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center; 如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;
3、使用绝对定位：首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；
4、使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

umeimmense · 2019-07-05T02:07:57Z

display:flex;
justify-content: center;
align-items: center;

Tcdian · 2019-07-05T03:03:32Z

绝对定位 + margin：auto
绝对定位 + 负margin (需已知宽高)
绝对定位 + transform
flex布局

luohong123 · 2019-07-05T09:00:32Z

父元素使用padding
flex布局
display: flex;
justify-content: center;
align-items:center;
使用绝对定位和transform
positon: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
使用绝对定位和负的margin
position: absolute;
left: 50%;
top: 50%;
margin-left: -宽的一半;
margin-top: - 高的一半；
margin auto
margin: 0 auto;
margin-top: 高的一半；
table-cell
.parent{
width: 300px;
height: 200px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.son{
width: 50px;
height:50px;
background:yellow;
border: 1px solid blue;
display: inline-block;
}
text-align: center和line-height

lydfree · 2019-07-06T08:12:22Z

1.单行文本，只需要将文本行高(line-height)和所在区域高度(height)设为一致即可

p{
height:40px;
line-height:40px
}

2.父元素高度不确定，只能靠内部文本内容撑开。可以设置margin，padding值相等

假设父元素是div
div{
margin: 30px auto;
padding:20px ;
}

3.父级高度固定的时，设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle

4、flex的垂直居中，这种做法可以不定义内部元素的高度

5.使用absolute+transform

jodiezhang · 2019-07-06T15:07:14Z

使用Flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent4{
    display:flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height:300px;
    background: #FD0C70;
}
.parent4 .child{
    color:#fff;
}
</style>
<body>
   <div class="parent4">
        <div class="child">hello world-4</div>
    </div>
</body>
</html>

使用绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{
    position:absolute;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent3 .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color:black;
    transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3">
        <div class="child">hello world-3</div>
    </div>
</body>
</html>

inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent2{
    height:300px;
    width: 300px;
    text-align: center;
    background: #FD0C70;
}
.parent2 span{
    display: inline-block;
    height:50%
  
}
.parent2 .child{
    display: inline-block;
    color: #fff;
}

</style>
<body>
    <div class="parent2">
        <span></span>
        <div class="child">hello world-2</div>
    </div>
</body>
</html>

使用 table 和 table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>

.parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

</style>
<body>
    <div class="parent1">
        <div class="child">hello world-1</div>
    </div>
</body>
</html>

转载：https://www.cnblogs.com/jogen/p/5213566.html

MissNanLan · 2019-07-07T15:15:36Z

1、使用position/transform/top/left( 已知宽高)
2 、使用display:flex/flex/align-items: center;jusitify-content: center
3、 margin： 0 auto;(已知宽度)
4、使用grid

     .parent{
          display: grid;
      }
      .left {
          justify-self: center; 
          align-self: center;
          /* 以上可以简写为  place-self: center;*/
          height: 100px;
          width: 100px;
          /* float: left; */
          background-color: blueviolet;
      }

YvetteLau · 2019-07-07T16:41:13Z

父元素 .container

子元素 .box

利用 `flex` 布局

/* 无需知道被居中元素的宽高 */
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

子元素是单行文本

设置父元素的 text-align 和 line-height = height

.container {
    height: 100px;
    line-height: 100px;
    text-align: center;
}

利用 `absolute` + `transform`

/* 无需知道被居中元素的宽高 */
/* 设置父元素非 `static` 定位 */
.container {
    position: relative;
}
/* 子元素绝对定位，使用 translate的好处是无需知道子元素的宽高 */
/* 如果知道宽高，也可以使用 margin 设置 */
.box {
    position: absolute;
    left: -50%;
    top: -50%;
    transform: translate(-50%, -50%);
}

利用 `grid` 布局

/* 无需知道被居中元素的宽高 */
.container {
    display: grid;
}
.box {
    justify-self: center; 
    align-self: center;
}

利用绝对定位和 `margin:auto`

/* 无需知道被居中元素的宽高 */
.box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.container {
    position: relative;
}

chongyangwang · 2019-07-14T05:25:53Z

解决方案有如下几种

绝对定位：

     position:abaolute;
     left:50%:
     top:50%:
     margin-left: -width/2;
     margin-top: -width/2;

间距居中

position-absolute: 上下左右都为0；
margin:auto;

flex

display:flex
jusicitify-content:center;
align-items:center;

display:table-cell

  display:table-cell;
  vertical-align:middle
  text-align:center;

单行文本居中:

text-align:center;
line-height:height;

YvetteLau mentioned this issue Aug 8, 2019

【Step-By-Step】高频面试题深入解析 / 周刊07 YvetteLau/Blog#38

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

使用CSS让一个元素水平垂直居中 #42

使用CSS让一个元素水平垂直居中 #42

YvetteLau commented Jul 4, 2019

mark-0609 commented Jul 4, 2019 •

edited

Loading

shenshuangdao commented Jul 4, 2019

tpxiang commented Jul 5, 2019

umeimmense commented Jul 5, 2019

Tcdian commented Jul 5, 2019

luohong123 commented Jul 5, 2019 •

edited

Loading

lydfree commented Jul 6, 2019 •

edited

Loading

jodiezhang commented Jul 6, 2019

MissNanLan commented Jul 7, 2019 •

edited

Loading

YvetteLau commented Jul 7, 2019

chongyangwang commented Jul 14, 2019 •

edited

Loading

使用CSS让一个元素水平垂直居中 #42

使用CSS让一个元素水平垂直居中 #42

Comments

YvetteLau commented Jul 4, 2019

mark-0609 commented Jul 4, 2019 • edited Loading

shenshuangdao commented Jul 4, 2019

tpxiang commented Jul 5, 2019

umeimmense commented Jul 5, 2019

Tcdian commented Jul 5, 2019

luohong123 commented Jul 5, 2019 • edited Loading

lydfree commented Jul 6, 2019 • edited Loading

jodiezhang commented Jul 6, 2019

MissNanLan commented Jul 7, 2019 • edited Loading

YvetteLau commented Jul 7, 2019

利用 flex 布局

子元素是单行文本

利用 absolute + transform

利用 grid 布局

利用绝对定位和 margin:auto

chongyangwang commented Jul 14, 2019 • edited Loading

mark-0609 commented Jul 4, 2019 •

edited

Loading

luohong123 commented Jul 5, 2019 •

edited

Loading

lydfree commented Jul 6, 2019 •

edited

Loading

MissNanLan commented Jul 7, 2019 •

edited

Loading

利用 `flex` 布局

利用 `absolute` + `transform`

利用 `grid` 布局

利用绝对定位和 `margin:auto`

chongyangwang commented Jul 14, 2019 •

edited

Loading