4-CSS居中

本文最后更新于:2021年2月15日 晚上

题目

1.第一类,div中的文字或者图片在div中垂直水平居中

2.第二类,div元素相对于它的父元素垂直水平居中

解法

第一类:文字/图片

line-height

仅限子元素为行内元素或图片,且只有单行/单个

第二类:div子元素

1.margin

父元素设置border或者padding,子元素设置magin。灵感来源于《CSS权威指南》第三版

  • p180 auto小节

  • p182 合并外边距详解小节

在包含块上设置边框或内边距时,会使其子元素的外边距包含在包含块内

也就是说父元素在设置边框或者内边距后,子元素的margin属性在垂直方向上可以直接以父元素边框为参考对象

缺点: 需要知道子元素宽高,并且父元素需额外添加没有太大意义的border/padding

事实上也可应用于图片,见示例

父元素

border: 1px solid transparent;/* 或者设置padding */

子元素

background-color: orange;
margin: calc(50% - 2.5em) auto;

relative+transform

父元素不用更改

子元素

position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

缺点:行内元素失效

通用解法

优点: 无需知道子元素的宽高

flex

父元素中添加

display: flex;
justify-content: center;
align-items: center;
/* flex-wrap: wrap; 换行 */
flex-direction: column;/* 调主轴 */

relative+absolute(+transform)

父元素使用position: relative,子元素设置如下

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

当然,如果标签自带marginpadding值,记得清除,否则translate移动的值将不是你想要的,除非你使用了box-sizing: border-box 。详情参见盒模型的宽高计算

定位方式除了上面这种方式,还有另一种奇技淫巧:

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

缺点:子元素有多个的时侯,存在重叠问题

表格布局

表格实际上越来越少用到了,可能会有潜在bug。目前没发现吧

父元素

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

子元素

行内元素无需调整,块级元素需要加上display: inline-block

伪元素+vertical-align

这个我是真的服了,奇技淫巧系列

父元素

text-align: center;

伪元素

content: '';
background-color: green;
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;

子元素

vertical-align: middle;

因为vertical-align实际上是给行内元素用的,所以块级元素需要额外加上inline-block


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!