css 居中问题

qq_37820215

于 2020-09-01 15:11:07 发布

阅读量363

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_37820215/article/details/108339892

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

居中分为水平居中，垂直居中，水平-垂直居中三中情况。div居中

三种居中 1（！！！！重要）：利用定位、left、margin来确定（left等定位属性，要使用时，它必需是已定位的元素（absolute，relative，fixed））

margin:0 auto;
//上外边距和下外边距是 0，右外边距和左外边距是 居中.表示横居中，竖不居中
margin:auto 0;
//上外边距和下外边距是 auto，右外边距和左外边距是 0
margin:auto;
//表示横竖都居中

margin:0 auto;   相同于 top:0;bottom:0;margin:auto ，但必须加上定位

三种定位2：flex布局 ,父元素设置 display: flex;以及居中，子元素不做处理

一、水平居中

1、外边距自适应：margin：0 auto；

<style>
center_text{
　　display:block;
　　width:500px;
  　margin：0 auto;
}
</style>
<div class="center">
　　<span class="center_text">
    我是行内元素，但我要居中必须是块级元素，所以我给自己设了display：block
   注意点：要求内部元素(.content_text)是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。
　　</span>
</div>

2、text-align:center方式

<style>
.center{
　　text-align:center;
}
center_text{
　　display:inline-block;
　　width:500px;
}
</style>
<div class="center">
　　<span class="center_text">
    text-align:center可以水平居中块级元素中的行内元素，如inline，inline-block；
　　</span>
</div>

3、flex布局：justify-content:center;

<style>
.div-parent {
    width: 400px;
    height: 200px;
    background-color: #aaa;
    display: flex;
    justify-content: center;
 }

.div-child {
    width: 80px;
    height: 50px;
    background-color: #007FFF;
 }
</style>
<div class="div-parent">
    <div class="div-child">
    父级元素设置为flex容器 display: flex;justify-content:center;
    子一级元素不做特别处理
</div>
</div>

二、垂直居中

1、flex布局：align-items:center;

<style>
.div-parent {
    width: 400px;
    height: 200px;
    background-color: #aaa;
    display: flex;
    align-items:center;
 }

.div-child {
    width: 80px;
    height: 50px;
    background-color: #007FFF;
 }
</style>
<div class="div-parent">
    <div class="div-child">
    父级元素设置为flex容器 display: flex;align-items:center;
    子一级元素不做特别处理
</div>
</div>

~~2、定位~~

<style>
.div-parent {
    width: 400px;
    height: 200px;
    background-color: #aaa;
    position:relative;
 }

.div-child {
    width: 80px;
    height: 50px;
    background-color: #007FFF;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
 }
</style>
<div class="div-parent">
    <div class="div-child">
    父级元素添加属性：position:relative;
    子一级添加属性：position: absolute; margin: auto 0;
</div>
</div>

3、内边距：父级元素设置内边距：padding-top: 80px;

<style>
.div-parent {
    width: 400px;
    height: 200px;
    background-color: #aaa;
    padding-top:80px;
 }

.div-child {
    width: 80px;
    height: 50px;
    background-color: #007FFF;
 }
</style>
<div class="div-parent">
    <div class="div-child">
    样例已知父级元素高度。也可用用比例设置。
</div>
</div>

三、水平垂直居中

1、绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中方式3</title>
    <style>
        /*使用绝对定位，确定了子div的宽高，left、right、top、bottom都设置为0，margin设置为auto*/
        .father {
            background: red;
            width: 500px;
            height: 500px;

            position: relative;
        }
        .son {
            width: 200px;
            height: 200px;
            background: green;

            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son">
margin:auto是指上下左右全都auto
margin:0 auto 是指上下是0，左右auto
    </div>
</div>
</body>
</html>

2、flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中方式4</title>
    <style>
        /*使用flex布局，为父div添加flex布局样式align-items和justify-content*/
        .father {
            background: red;
            width: 500px;
            height: 500px;

            display: flex;
            align-items: center;
            justify-content: center;
        }
        .son {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son">子元素不操作</div>
</div>
</body>
</html>

3、使用css3的translate水平垂直居中元素 :这种方式将脱离文档流的元素

<style>
.center {
    position: relative;
    width: 960px;
    height: 500px;
    background: #1879D9;
}
.center_text{
    position: absolute;
    top: 50%;/*如果把这几行删掉，不可以居中 */
    left: 50%;
    transform: translate(-50%, -50%); 
}
<style>
<div class="center">
　　<div class="center_text">
　　　　当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置，
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。
　   </div> 
</div>

四、图片居中

background:url（..） no-repeat center

qq_37820215

关注

0
点赞
踩
1

收藏

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

居中分为水平居中，垂直居中，水平-垂直居中三中情况。div居中一、水平居中1、外边距自适应：margin：0 auto；<style>center_text{　　display:block;　　width:500px; 　margin：0 auto；}</style><div class="center">　　<span class="center_text"> 我是行内元素，但我要居中必须是块级元素，所以我给自
复制链接

扫一扫

专栏目录