html中元素水平居中的方法

一、行内元素
给行内元素的父元素设置text-align:center。
二、定宽元素
给元素本身设置margin:0 auto。
三、不定宽元素
1、将需要居中的元素转为行内元素或者行内块元素,再给元素的父元素设置text-align:center。
2、使用flexbox布局,将需要居中的元素的父元素设置display:flex及justify-content:center。
3、给需要居中的元素的父元素设置float:left、position:relative及left:50%,给需要居中的元素设置position:relative及left:-50%。
4、给父元素设置position: relative,给需要居中的元素设置position: absolute、 left: 50%及transform: translateX(-50%)。缺点在于元素的宽度是奇数时,50%是小数,边缘的文字或者边框会看不见。
5、将元素放进table的单元格中。

元素

你可能感兴趣的:(html)