（4种）实现垂直居中的方法总结

如果父元素的`height`不写，只需要设置父元素`padding:10px 0;`就可以将子元素垂直居中；如果父元素的`height`写死了，就比较难垂直居中，以下是垂直居中的几种方法。

1.使用`table`自带的功能实现垂直居中。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title>
</head>
<body><table class="parent"><tr><td class="child">一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字</td></tr></table>
</body>
</html>

.parent{border: 1px solid red;height: 600px;
}.child{border: 1px solid green;
}

2.把`div`装成`table`实现垂直居中。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title>
</head>
<body><div class="table"><div class="td"><div class="child">一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字</div></div></div>
</body>
</html>

div.table{display: table;border: 1px solid red;height: 600px;
}
div.td{display: table-cell;border: 1px solid blue;vertical-align: middle;
}
.child{border: 1px solid black;
}

使用display：table把第一个div转成table，使用display:table-cell把第二个div转成tr,利用table自带的功能实现垂直居中。

3.使用绝对定位+`transform: translate(-50%,-50%);`

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title>
</head>
<body><div class="parent"><div class="child">一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字</div></div>
</body>
</html>

    .parent{height: 600px;border: 1px solid red;position: relative;
}
.child{border: 1px solid green;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}

父元素使用相对定位，子元素使用绝对定位，设置子元素top: 50%;left: 50%;transform: translate(-50%,-50%);，完成相对父元素水平垂直居中

4.使用`flex`布局

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title>
</head>
<body><div class="parent"><div class="child">一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字</div></div>
</body>
</html>

.parent{height: 600px;border: 3px solid red;display: flex;justify-content: center;align-items: center;
}
.child{border: 3px solid green;width: 300px;
}

flex是最好用的，在父元素中设置justify-content: center;align-items: center;,就完成了子元素的水平和垂直居中

（4种）实现垂直居中的方法总结相关推荐

css 几种水平垂直居中的方法及弹性盒子
margin :auto 方法 ================== 给要居中的元素设置 margin :auto 绝对定位 position :absolute; top:0;bottom:0; ...
html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...
flex vue 垂直居中居上_推荐几种在移动端实现垂直居中的方法
推荐几种在移动端实现垂直居中的方法. 方法1:table-cell html结构垂直居中 CSS.box1{ display: table-cell; vertical-align: middle; ...
【面试题】CSS 中几种最常用的水平垂直居中的方法
目录 CSS 中几种最常用的水平垂直居中的方法一.使用 margin:auto 二.使用 position:absolute 三.使用弹性布局四.文本水平对齐和行高五.使用网格布局 CSS 中几 ...
7种CSS实现垂直居中的方法总结
忽然发现自己已经有段时间没有好好的复习下CSS布局了,有点惭愧啊~于是打算总结一下关于CSS垂直居中的7种方法. 设定行高(line-height) 在CSS中,line-height 属性设置两段段 ...
html屏幕垂直居中显示,HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结...
水平居中直接加上标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法放上示范的html代码: MAIN 方法一: div使用绝对布局, ...
DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园
DIV或者DIV里面的图片水平与垂直居中的方法 <div class="box"><img /> </div> 水平居中的常用方式: text- ...
[css] 写出div在不固定高度的情况下水平垂直居中的方法？
[css] 写出div在不固定高度的情况下水平垂直居中的方法? 我知道的有两种方法<!DOCTYPE html> <html><head><meta char ...
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 flex布局:还有就是可以用定位也可以实现等等: flex:父div:{display:flex: justify-conten ...
CSS实现水平垂直居中的方法总结
在CSS-trick 上面有一篇很棒的博文介绍CSS中的水平垂直居中戳这里. 在这里我强烈推荐这篇文章的原因是:整篇文章的逻辑结构非常清晰.我之前也看过不少CSS实现垂直居中相关的博客,很多博客的总 ...

（4种）实现垂直居中的方法总结

如果父元素的`height`不写，只需要设置父元素`padding:10px 0;`就可以将子元素垂直居中；如果父元素的`height`写死了，就比较难垂直居中，以下是垂直居中的几种方法。

1.使用`table`自带的功能实现垂直居中。

2.把`div`装成`table`实现垂直居中。

3.使用绝对定位+`transform: translate(-50%,-50%);`

4.使用`flex`布局

（4种）实现垂直居中的方法总结相关推荐

最新文章

热门文章

（4种）实现垂直居中的方法总结

如果父元素的height不写，只需要设置父元素padding:10px 0;就可以将子元素垂直居中； 如果父元素的height写死了，就比较难垂直居中，以下是垂直居中的几种方法。

1.使用table自带的功能实现垂直居中。

2.把div装成table实现垂直居中。

3.使用绝对定位+transform: translate(-50%,-50%);

4.使用flex布局

（4种）实现垂直居中的方法总结相关推荐

最新文章

热门文章

如果父元素的`height`不写，只需要设置父元素`padding:10px 0;`就可以将子元素垂直居中；如果父元素的`height`写死了，就比较难垂直居中，以下是垂直居中的几种方法。

1.使用`table`自带的功能实现垂直居中。

2.把`div`装成`table`实现垂直居中。

3.使用绝对定位+`transform: translate(-50%,-50%);`

4.使用`flex`布局