实现一个元素垂直居中的六种方式

约定不等于承诺〃 2022-07-13 01:07 254阅读 0赞

*  行内元素line-height设置为父元素的高度
 *  行内元素vertical middle
 *  top 50再向上移动元素一半的高度
 *  margin auto 这个方法非常神奇
 *  加50高度的空div
 *  单元格属性 table-cell

# （行内元素）line-height设置为父元素的高度 #

只适用单行文本, 多行将会跑出父元素外

# （行内元素）vertical： middle； #

给要居中的元素加个行级兄弟元素，如img，input，  
使此元素height：100%，width：0，撑满父元素，然后给居中元素设置vertical-align：middle；

如果是span，a标签的兄弟元素只能设定行高line-height为固定父元素高度，不能为100%！

# top： 50%再向上移动元素一半的高度 #

只适用于高度已知的元素，并要使用绝对定位position:absolute，  
top：50% ， 再加 margin-top： 元素一半的高度的**负值**

# margin： auto； （这个方法非常神奇） #

这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;（水平居中则再设置left:0;right:0;）。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;**使块级元素垂直居中是很简单的**。

Content here

content \{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%;\}  
优点：简单  
缺点：IE8以下无效，无足够空间时，content 被截断，但是不会有滚动条出现

div { height:300px; width:300px; background:#000; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }

# 加50%高度的空div： #

高度H已知，但不采用绝对定位，  
让要居中的元素前面加个div 高度为50%父元素高度，再将要居中的元素margin-top：-H/2px；

# 单元格属性（ table-cell） #

**父元素设置display：teble-cell即可让子元素垂直居中**  
行内元素水平居中：text-align：center；  
块级元素水平居中：margin：auto

发表评论取消回复

表情：

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

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

相关阅读

相关 css 水平垂直居中的三种方式

绝对定位 + transform /示例/ position:absolute; left:50%; top:50%; tra

墨蓝/ 2023年07月07日 12:53/ 0 赞/ 30 阅读

相关子元素相对父元素垂直水平居中的八种方式

基本样式 HTML <!DOCTYPE html> <html lang="en"> <head> <meta char

客官°小女子只卖身不卖艺/ 2023年03月01日 13:46/ 0 赞/ 16 阅读

相关 CSS水平垂直居中的三种方式。

文字在盒子中：`text-align:center; line-height:height;` 子盒子在父盒子中： ①在父盒子中使用flex布局：

我会带着你远行/ 2023年02月28日 05:28/ 0 赞/ 28 阅读

相关元素居中的三种方式

元素居中的三种方式面试题如何让一个元素在父元素中上下左右居中？ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

た入场券/ 2022年12月26日 00:54/ 0 赞/ 201 阅读

相关 css实现水平/垂直居中的方式

水平居中分为块状元素和行内元素，而块状元素又分为定宽块状元素和不定宽块状元素。 1、行内元素水(display: inline)平居中（文本、图片等）是通过给父元素设置 te

我不是女神ヾ/ 2022年12月20日 03:17/ 0 赞/ 152 阅读

相关 CSS 实现元素水平垂直居中的 N 种方式

点击上方三分钟学前端，关注公众号回复交流，加入前端编程面试算法每日一题群面试官也在看的前端面试资料 ![ba40f0ea9cf747c0909f83922c3

╰+哭是因爲堅強的太久メ/ 2022年09月04日 03:59/ 0 赞/ 114 阅读

相关实现一个元素垂直居中的六种方式

行内元素line-height设置为父元素的高度行内元素vertical middle top 50再向上移动元素一半的高度 margin auto

约定不等于承诺〃/ 2022年07月13日 01:07/ 0 赞/ 255 阅读

相关 CSS 元素垂直居中的 6种方法

CSS 元素垂直居中的 6种方法利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left

淡淡的烟草味﹌/ 2022年06月05日 23:59/ 0 赞/ 329 阅读

相关【转载】CSS垂直居中的11种实现方式

原文链接：[CSS垂直居中的11种实现方式][CSS_11] 11种实现方式分别如下： 1. 使用绝对定位和负外边距对块级元素进行垂直居中 html代码：

忘是亡心i/ 2021年09月30日 06:08/ 0 赞/ 292 阅读

相关水平垂直居中的几种实现方式

固定宽高 1.position+margin-top+margin-left .box-container{ position: relati

一时失言乱红尘/ 2021年09月02日 06:29/ 0 赞/ 393 阅读