将一个div里面的文字或者说内容水平居中,垂直居中,水平垂直居中的方式

目录

    • 水平居中方法
    • 垂直居中方法
    • 水平垂直居中方法

水平居中方法

1.行内元素水平居中方法,在父级块元素中设置

text-align:center;

2.块级元素水平居中方法

margin:0 auto;

3.弹性布局,给父元素设置

display:flex;
justify-content:center;

垂直居中方法

1.弹性布局 父元素设置

display:flex;
align-items:center;

2.固定高度的话可以用line-height,将line-height和height值相等就行

height:20px;
line-height:20px;

水平垂直居中方法

1.弹性布局 给父元素设置

display:flex;
justify-content:center;
align-items:center;

2.定位
a.父元素设置相对定位

position:relative;

子元素设置绝对定位

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

b.父元素设置相对定位

position:relative;

子元素设置绝对定位并将margin-left和margin-top值设置为宽高的一半(负的)

height:40px;
width:160px;
position:absolute;
left:50%;
top:50%;
margin-top:-20px;
margin-left:-80px;

3.模拟表格法
父元素设置

display:table;

子元素设置

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

你可能感兴趣的:(html+css)