CSS实现居中

时间：2023-03-30 16:28:13 CSS

水平居中水平居中是我们在开发过程中遇到的一种非常非常常见的布局。先简单说下常用方法margin:autotext-alignflexposition定位margin:auto最简单的实现水平居中的方法，目标元素必须有宽度。注意这个方法只对块级元素有效(block)

text-align可以实现块级元素内部的内联元素水平居中。请注意，此方法仅对inline、inline-block、inline-table和inline-flex元素有效。当多个内联元素彼此相邻时，水平居中也有效。

position定位看下面的代码，可以清楚的看到，首先父元素需要添加一行position:relative，其次是width目标元素的必须是已知的。知道了就一定要用js动态计算

.box{height:100像素；行高：100px；背景：#ddd；}.target{宽度：30px；高度：30px；背景：红色；}.box{display:flex;高度：100px；对齐项目：居中；背景：#ddd；}.target{宽度：50px；高度：50px；背景：红色；}vertical-alignvertical-align该属性定义了内联元素的基线相对于元素所在行的基线的垂直对齐方式。需要和伪元素一起使用（注意居中的目标元素必须是inline-block，伪元素的高度必须是100%）和display:table-cell一起使用，主要是设置父元素的vertical-align和table-celltable-cell，看vertical-alignposition定位，看下面代码，可以很清楚可见，首先父元素需要添加一行position:relative，其次必须知道目标元素的高度。不知道的话一定要用js动态计算

上一篇：浏览器渲染过程&Composite（渲染层合并）简述

下一篇：手机键盘和光标兼容

CSS实现居中相关文章