目录
一、绝对定位居中
1.新建了一个div,设置了默认样式
width: 100px;
height: 100px;
background-color: aqua;
2.效果如下:
3.然后给这个div设置绝对定位
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;//绝对定位
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;//自动居中
4.效果如下:
二、水平垂直居中
1.在父元素上添加弹性布局及内容对齐属性,在上面div样式的基础上
display: flex;//弹性布局
//设置同一行子元素在X轴的对齐方式
justify-content: center;//排列在当前行的中间位置
//设置同一行子元素在Y轴的对齐方式
align-items: center;//排列在当前行的中间位置
justify-content的参数:
属性值 | 描述 |
---|---|
flex-start | 排列在当前行的最左边 |
flex-end | 排列在当前行的最右边 |
center | 排列在当前行的中间位置 |
space-between | 间距相等排列,两边不留白 |
space-around | 间距相等排列,两边留白等于间距的一半 |
align-items的参数:
属性值 | 描述 |
---|---|
flex-start | 排列在当前行的最上方 |
flex-end | 排列在当前行的最下方 |
center | 排列在当前行的中间位置 |
stretch | 当子元素没有设置高度或为auto,将占满整个容器的高度 |
baseline | 以子元素第一行文字的基线对齐 |
align-content的参数
属性值 | 描述 |
---|---|
flex-start | 排列在当前列的最上方 |
flex-end | 排列在当前列的最下方 |
center | 排列在当前列的中间位置 |
space-between | 间距相等排列,上下不留白 |
space-around | 间距相等排列,上下留白等于间距的一半 |
三、定位+变形居中
1.给父元素添加相对定位,自身元素添加绝对定位,自身元素与父元素的距离自行设置
子元素
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;//相对定位
top: 50%;
left: 50%;
//变形
transform: translate(-50%,-50%);//自身元素移动
父元素
display: flex;//弹性布局
//设置同一行子元素在X轴的对齐方式
justify-content: center;//排列在当前行的中间位置
//设置同一行子元素在Y轴的对齐方式
align-items: center;//排列在当前行的中间位置
transform的参数:
2.效果如下: