第一种方式是使用margin进行移动
水平居中 margin:0 auto;
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中</title><style>/* 设置父容器样式和高度 */.container{width: 400px;height: 400px;border: 5px solid black;}/* 子元素的样式 */.container>div{width: 200px;height: 200px;background-color: blue;/* 水平居中 */margin: 0 auto;}</style></head><body><!-- 父容器 --><div class="container"><!-- 子元素 --><div></div></div></body></html>
要设置垂直居中的话，就要根据父元素的高度和子元素的高度进行计算，也就是父元素的高度的一半再减去子元素的高度的一半
/* 子元素的样式 */.container>div{width: 200px;height: 200px;background-color: blue;/* 水平垂直居中 */margin: 100px auto;}
水平垂直居中
第二种方式就是使用flex布局，让父容器设置为display：flex；设置主轴方向justify-content:center
交叉轴为align-items:center
<style>/* 设置父容器样式和高度 */.container{width: 400px;height: 400px;border: 5px solid black;/* 父元素开启flex布局 */display: flex;/* 主轴方向上居中 */justify-content: center;/* 交叉轴方向上居中 */align-items: center;}/* 子元素的样式 */.container>div{width: 200px;height: 200px;background-color: blue;}</style>
第三种方式使用绝对定位和相对，给父容器设置为相对相位position:relative;
水平居中：先子元素设置绝对定位position:absolute; 设置绝对定位元素的left:50%; 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px; margin-left：-100px
垂直居中：就要根据父元素的高度和子元素的高度进行计算，也就是父元素的高度的一半再减去子元素的高度的一半
<style>/* 设置父容器样式和高度 */.container{width: 400px;height: 400px;border: 5px solid black;/* 父容器相对定位 */position: relative;}/* 子元素的样式 */.container>div{/* 子元素绝对定位 */position: absolute;width: 200px;height: 200px;background-color: blue;/* 设置绝对定位元素的left:50%; */left: 50%;/* 设置子元素左外边距 */margin-left: -100px;/* 再根据父容器和子元素的高度算出垂直居中的高度 */margin-top: 100px;}</style>
还有一种水平垂直居中的方式也是使用绝对定位和相对定位，也是给父容器设置相对定位，子元素设置绝对定位，然后让绝对定位的元素的上下左右都为0，再给个margin：auto就行了
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中</title><style>/* 设置父容器样式和高度 */.container{width: 400px;height: 400px;border: 5px solid black;/* 父容器相对定位 */position: relative;}/* 子元素的样式 */.container>div{/* 子元素绝对定位 */position: absolute;width: 200px;height: 200px;background-color: blue;margin: auto;left: 0;top: 0;bottom: 0;right: 0;}</style></head><body><!-- 父容器 --><div class="container"><!-- 子元素 --><div></div></div></body></html>
