一、水平居中
行内元素
- 1.如果它的父元素是块级元素,直接给父元素设置 text-align:center;
css代码:
html代码:
效果:
- 2.如果它的父元素不是块级元素,就先将父元素设置为块级元素,在设置 text-align:center;
css代码:
html代码:
效果:
块级元素
- 方法1 使用margin:0 auto; text-align:center;(分宽度是否确定)
确定宽度:谁居中,就给谁设置 margin: 0 auto;
css代码:
html代码:
效果:
**默认子元素的宽度和父元素一样,需要给子元素设置 display: inline;转换为行内元素,父元素设置 text-align: center; **
css代码:html代码:
效果:
- 方法2 使用定位
设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的left:50%; 意思为让子元素的左上角水平居中
设置transfrom:translateX(-50%);
css代码以及html代码:
效果:
二、垂直居中
行内元素
- 单行行内元素
设置单行行内元素行高等于盒子的高
css代码以及html代码:
效果:
块级元素
- 使用定位
设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的top:50%; 让子元素的左上角垂直居中
定高度:设置transform:translateY(-50%);
css代码以及html代码:
效果:
水平垂直居中
已知高度和宽度的元素
- 设置父元素为相对定位,子元素设置绝对定位,top:0;right:0;bottom:0;left:0;margin:auto;
css代码以及html代码:
效果:
未知高度和宽度的元素
- 使用定位
设置父元素为相对定位,子元素设置绝对定位,left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
css代码以及html代码:
效果: