CSS居中问题

最新推荐文章于 2020-09-01 15:11:07 发布

我的绝伦大人

最新推荐文章于 2020-09-01 15:11:07 发布

阅读量208

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/yushuangyushuang/article/details/79244114

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

参考文章一
 参考文章二
 参考文章三

这里写图片描述

水平居中

（一）针对图片、按钮、文字等行内元素（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;
 }

（五）浮动实现（具体实现见上文）这里写链接内容

我的绝伦大人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS居中问题

参考文章一参考文章二参考文章三水平居中（一）针对图片、按钮、文字等行内元素（display为inline或inline-block等设置父元素为: text-align:center;（二）块状元素水平居中（width固定）实际上是把元素的margin-left、margin-right均设为0，将元素进行水平居中，但是此方法对浮动元素
复制链接

扫一扫

专栏目录