水平居中
(一)针对图片、按钮、文字等行内元素(display为inline或inline-block等
设置父元素为:
text-align:center;
(二)块状元素水平居中(width固定)
实际上是把元素的margin-left、margin-right均设为0,将元素进行水平居中,但是此方法对浮动元素
及绝对定位元素无效。
margin:0 auto
(三)浮动元素的水平居中
宽度不固定的浮动元素(两个相对定位)
把浮动元素包裹在其他类型的元素里面,比如块状元素。
把浮动元素相对定位到父元素宽度50%的地方,但此时比居中的位置多出自身的宽度,这就需要他里面的子元素(即居中元素)再用一个相对定位,把多出的宽度抵消。由于相对定位是相对于自身原来的文档流,只需把自身宽度的一半设为left或right即可。
注意:百分比都是相对于父级来计算的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: #e4d6e0;
}
.outerbox{
/* 相对原来位置移动父级元素的宽高的百分比 */
float:left;
border:2px solid blue;
position:relative;
left:50%;
}
.innerbox{
float:left;
background-color: pink;
position:relative;
right:50%;
}
</style>
</head>
<body>
<div class="outerbox">
<div class="innerbox">我是浮动的</div>
</div>
</body>
</html>
宽度固定的浮动元素(相对定位+margin)
只操作外层的包裹元素,将包裹元素相对定位到页面的50%,再拉回来就好了,包裹元素的宽度高度和
浮动元素完全相同。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: #e4d6e0;
}
.outerbox{
/* 相对原来位置移动父级元素的宽高的百分比 */
float:left;
width:200px;
height:200px;/* 高度可以不用设 */
border:2px solid blue;
position:relative; /* 可以用相对定位也可以用绝对定位 */
left:50%;
margin-left:-100px;
}
.innerbox{
background-color: pink;
}
</style>
</head>
<body>
<div class="outerbox">
<div class="innerbox">我是浮动的</div>
</div>
</body>
</html>
(四)绝对定位元素
第一种:绝对定位+负margin(宽度确定)
需要知道居中元素的宽高,父元素相对定位,居中元素绝对定位
父元素:
{position:relative;}
子元素宽度确定:
{position:absolute;
left:50%;
margin-left:-(width/2);//(向左偏移元素宽度的二分之一)
第二种:绝对定位+translate
移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时
移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)
父元素:
{position:relative;}
子元素
position: absolute;
left: 50%;
transform:translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
垂直居中
(一)行内元素
line-height的大小和其父元素的height相同
(二)块级元素
高度已知———-绝对定位+负margin
父元素:
{position:relative;}
子元素宽度确定:
{position:absolute;
top:50%;
margin-top:-(height/2);//(向左偏移元素宽度的二分之一)
高度不知道——–绝对定位+translate
父元素:
{position:relative;}
子元素
position: absolute;
top: 50%;
transform:translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
(三)浮动元素
高度已知———相对定位+负margin
高度不知道——-两个相对定位
水平垂直居中
(一)绝对定位+负margin
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top:-50px;
}
(二)绝对定位+translate
div{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
(三)flex布局
align-items:定义项目在交叉轴上如何对齐(垂直) center 交叉轴的中点对齐。
justify-content :定义了项目在主轴上的对齐方式(水平) center 居中
注意:在父元素上设置display:flex
#father{
width:500px;
height:500px;
background-color: antiquewhite;
display: flex;
justify-content: center; //水平居中
align-items: center; //垂直居中
}
#son{
width:100px;
height:100px;
background-color: aqua;
}
(四)absolute+margin:auto (原理不太了解)
div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
(五)浮动实现 (具体实现见上文)这里写链接内容