CSS居中完全指南

最新推荐文章于 2024-09-04 12:52:05 发布

留长发的少年

最新推荐文章于 2024-09-04 12:52:05 发布

阅读量215

点赞数

分类专栏： CSS

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原文：Centering in CSS: A Complete Guide

1、水平居中：

**(1)inline或inline-*elements 元素（像文本或<a>）水平居中**

在块级父容器中让inline元素居中，只需使用text-aligin:center，【会影响直接子类和间接子类】，使得inline元素，如img,input,td,label,span..相对于直接父类水平对齐。

.对于inline,inline-block,inline-table,inline-flex,等都有作用

<style>
.p1{ padding:0px;border:solid 1px green;text-align:center;}
 .wrapper{border:solid 1px red;text-align:center;width:500px;}
 .p2{padding:0px;border:solid 1px green;}
 .span1{border: solid 1px gray;}
 .right-content{height: 100px;width: 300px;border:solid 1px yellow;}
 .content-icon{width: 100px;height: 100px;}
 </style>
</head>
<body>
<p class="p1">我是p1</p>
<div class="wrapper">
    <p class="p2"> 我是p2</p>
    <span class="span1">我是span1</span>
    <div class="right-content">
        <p class="p2"> 我是p2</p>
        <h4>我是h4</h4>
    </div>
    <div class="right-content">
        <input type="button" style="padding:10px;" value="Submit"/><br>
        <label> 我是label</label>
    </div>
    <img class="content-icon" src="../pic/gallery3.jpg">
</div>
</body>

(2) 块级元素水平居中：

你可以通过设置margin-left和margin-right为auto(前提是设置了width，不然它将会拉伸为父类的宽度，)可以缩写为如下；

.center-me{ margin:0 auto; }

.注意你不能通过float让一个元素居中，但这里有一个小技巧

<style>
.outer2{ margin:0 auto;width:500px;text-align:center;border:solid1pxyellow;}
 .content2{ border:solid 1px red;}
</style>

（3）多个块级元素在一行上居中

如果你有两个或则更多的块级元素，需要在一行中水平居中，那么你需要为它们设置不同的的display类型，比如inline-block或则flexbox

①display:inline-block;和text-align:center;②display:flex; justify-content:center;

<style>
        .wrapper{ width: 800px;border:solid 2px yellow;text-align:center;}
        .wrapper div{  display:inline-block;border: solid 2px red;}
        .flex-center{ border:solid 2px green; width: 800px;display:flex;
            flex-direction: row;//default;justify-content:center; margin-top:10px;}
        .flex-center div{ border: solid 2px red;}
    </style>
 </head>
    </body>
    <div class="wrapper">
        <p> i am a p element in wrapper</p>
        <p> i am a p element in wrapper</p>
        <div >
            <p> i am a p element in div in wrapper</p>
            <p> i am a p element in div in wrapper</p>
        </div>
        <div >
            <p> i am a p element in div in wrapper</p>
            <p> i am a p element in div in wrapper</p>
        </div>
    </div>
    <div class="flex-center" >
        <div >
            <p> i am a p element in div in flex-ceneter</p>
            <p> i am a p element in div in flex-ceneter</p>
        </div>
        <div >
            <p> i am a p element in div in flex-ceneter</p>
            <p> i am a p element in div in flex-ceneter</p>
        </div>
    </div>
    </body>

2、竖直方向上的居中：

(1)如果是inline或则inline-*元素（类似文本或<a>）

①只有一行时

有时候inline/text元素可以标签为竖直居中，仅仅是因为它的上下padding相同:

.link{ padding-top:20px ;padding-bottom:30px; }

如果由于某种原因无法使用padding时，可以将line-height和height的值设置为相同:

.center-text-trick{ height:100px;line-height:100px;} //仅适用于只有一行的时候,且只能作用于指定标签，目前可见只能是text,a,label比如<div> text <div>,而如果是一个图片不起作用。

②如果有多行时

1)、设置上下padding相同仍然能够让多行text竖直居中；

2)、如果padding不起作用的话，你可以让text元素表现为:table-cell，然后结合vertical-align;

<style>
.table-cell-middle{ display:table;
    /* 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符*/
    border:solid 2px red; height:200px; font-size:20px;width:300px;}
.table-cell-middle p{ display:table-cell; border:solid 2px;
    /*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
    vertical-align:middle; /* 没有center值，和水平的不同*/ }
</style>

<body>
<div class="table-cell-middle">
    <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>
</body>

3)、如果table-*不起作用的时候，可以用flex来实现竖直居中，前提是parent的高度必须确定（px, %,等）。例如；

<style>
.flex-center{ height:400px; width:800px; border:solid 2px yellow; display:flex;
    flex-direction:column; justify-content:center; }
.flex-center p{ border:solid 2px green; margin:0px; }
 </style>

<body>
<div class="flex-center">
    <p>I'm vertically </p>
    <p>I'm vertically </p>
    <p>I'm vertically </p>
</div>
</body>

如果上面几种都不能实现竖直居中的话，你可以使用“幽灵元素”，设置一个充满高度的伪装元素，放在容器里面，然后text将在竖直方向上跟随它。（前提是parent和child高度都要是确定值，单行且不超过剩余宽度时child高度可不需要）

<style>.ghost-element{ height:400px; width:900px;border:solid 2px red; }
.ghost-element::before{ content:" "; display:inline-block; height:100%; width:1%;
    vertical-align:middle; background:green;//实际使用时设置为和背景同色 }
.ghost-element p{ width:400px; display:inline-block; vertical-align:middle;
    border:solid 2px green; }
</style>
<body>
<div class="ghost-element">
    <p>I'm vertically centered multiple lines of text in a CSS-created table layout</p>
</div>
</body>

(3) 块级元素竖直居中

①先判断高度是否确定

在网页中不知道布局的高度是很平常的事情，很多原因；如果宽度改变时，text文本回流改变高度；text的style的不同也能改变高度；text的数量也能改变高度；固定横纵比的元素比如图片，当调整大小时也能改变高度；等

1)、如果你知道自身高度，要竖直居中，你可以：

<style>
.position-middle{  height:200px; position:relative; border:solid 2px green;}
.position-middle div{ position:absolute; height:100px; top:50%; margin-top: -50px;
    border:solid 2px yellow; }
</style>

<body>
<div class="position-middle">
    <div> <p>I'm vertically centered multiple lines of text in a CSS-created </p></div>
</div>
</body>

2) 、如果你不知道自身高度，通过将自身向下移动父类1/2高度，再向上移动自身的1/2高度仍然可以实现居中，

<style>
.position-transform-middle{  position:relative; height:200px;  border:solid 2px red; }
.position-transform-middle div{ position:absolute; top:50%; transform:translateY(-50%);
    border:solid 2px green; }
</style>

<body>
<div class="position-transform-middle">
    <div> <p>I'm vertically centered multiple lines of text in a CSS-created </p></div>
</div>
</body>

3) 、不管知不知道自身的高度，都可以使用flex,可以有多个block;

<style>
.flex-middle{ height:300px; display:flex; justify-content:center; flex-direction:column;
    border:solid 2px yellow; }
.flex-middle div{ border:solid 2px green; }
</style>

<body>
<div class="flex-middle">
    <div><p>I'm vertically centered multiple lines of text in a CSS-created </p></div>
    <div><p>I'm vertically centered multiple lines of text in a CSS-created </p></div>
    <div><p>I'm vertically centered multiple lines of text in a CSS-created </p></div>
</div>
</body>

3、水平和竖直都居中

你可以将上边的集中联系起来完美的实现居中，但是无论如何都不外乎于三种情况。

(1)是否有固定的宽和高

如果知道宽和高，可以通过position和margin属性，如下：

.parent{position:relative;}

.child{width:300px;height:100px;padding:20px;

position:absolute;top:50%;left:50%;margin:-70px 0 0 -170px};

(2)不知道宽高

如果你不知道宽或者高，你可以使用position和transform属性，如下；

.parent{ position:relative;}

.child{ position:absolute;top:50%;left:50%;

transform:translate(-50%,-50%)}

(3) 通用方法

使用flex如下：

.parent{display:flex;justify-content:center;align-items:center;}

留长发的少年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录