css 水平、垂直居中

2020-02-14 19:36栏目:龙竞技官网
TAG:

css 实现水平居中,垂直居中,水平垂直居中,是css 入门的必修课题,也是代码实践,笔试面试中经常遇到的场景。这次的内容主要围绕着几种场景下的,多种水平居中方法的实现

实现水平居中,比较简单,对于行内元素,设置text-aligin:center;对于块级元素,设置left:0;right:0;margin: 0 auto。

水平居中

图片 1image.png

以下是实现垂直居中的方法:

行内元素

行内元素:(img、span、文字等行内元素),通过在父级元素设置 text-align:center 使元素水平居中。

1. 居中元素为块级元素

基础代码

<div > <div >牛</div></div>

.container{ width: 100px; border:1px solid red; height: 100px;}.container .box{ font-size: 20px; line-height: 50px; background-color: blue; color: white;}

块级元素的特点:可设置元素的宽度,在不设置宽度时, 元素的宽度会自动填满其父元素宽度,并独占一行

居中元素设置宽度,并且设置 margin: auto 可实现水平居中

.container .box{ height: 50px; width: 50px; /* 设置宽度 */ margin: 0 auto; /* 设置宽度 */}

问题: margin: auto 实现水平居中的前提是, 元素的宽度已知,当宽度值未知时,见2.2

1.最简单的文字垂直居中,利用line-height属性,设置其和父元素等高

块级元素

块级元素:(div、p、h1...h6、ul、li等块级元素),通过在要居中元素设置 margin:0 auto(上、右、下、左),这里表示上下0 左右自适应,达到元素水平居中。

2. 居中元素为行内元素

基础代码

<div > 牛</div>

.container{ width: 100px; border:1px solid red; height: 100px;}.container .box{ font-size: 20px; background-color: blue; color: white;}

行内元素的特点: 行内元素的宽度为元素自身撑起的宽度,和其他元素在同一行,高度,宽度,内边距等都是不可控的,即设置padding-left, padding-right, margin-left, margin-right, height, width 都无法生效

利用行内元素的特点,设置 text-align:center 使元素居中

.container{ text-align: center;}

利用 行内元素设置 text-align 实现水平居中的方法,可以针对居中元素为块级元素,但宽度不确定时 的场景

<div > <div >牛</div> </div>

.container{ text-align: center;}.container .box{ display: inline-block; *display: inline; /*兼容性代码*/ *zoom: 1; /*兼容代码*/}

问题: 需要解决 display: inline-block 在IE 下的兼容性问题

2.父元素设置样式table-cell

垂直居中

3. 利用定位实现水平居中

相对定位: 相对定位就是将元素偏离元素的默认位置,但是并没有脱离文档流,只是视觉上发生的偏移,不会改变元素的display 属性

绝对定位: 相对于设置了 相对定位的上层元素或者顶级元素的相对位置,无论设置的元素为块级元素还是行内元素,position 设置成absolute 之后 , 元素display 表现为 block, 元素脱离文档流,父元素无法知道该元素的高度

因此,从以上的定义我们可以得到一种新的水平居中的方式,父级元素设为相对定位,居中元素设置为绝对定位,设置居中元素的宽度,并相对于父元素设置位置

.container{ position: relative;}.container .box{ position: absolute; width: 50px; /*设置宽度*/ left: 50%; /*左移50%*/ margin-left: -25px; /*修正位置*/}

缺点: 缺点是需要知道元素的宽度

{display:table-cell;vertical-align:middle;}

行内元素

行内元素:(img、span、文字等行内元素),通过在父级元素设置display: table-cell;vertical-align: middle; 使元素垂直居中,如果是单行文字或者其他 可以设置line-height:容器高;

4 利用定位,translate 实现水平居中

对于已知元素的宽度,我们可以使用3中的 margin-left: -25px; /*修正位置*/ 进行精确的定位,而对于不知道宽度的元素,我们可以使用 translate 来精准定位,只需要将 margin-left: -25px; /*修正位置*/ 替换成 transform: translate 即可

.container .box{ font-size: 20px; background-color: blue; color: white; position: absolute; left: 50%; transform: translate; width: 50px;}

低版本的IE浏览器,还需要给子元素添加{display:inline-block;}

块级元素

高度固定通常是使用

  • 绝对定位与负边距
  • 绝对定位与margin
  • display table-cell

高度不固定

  • display table-cell  
  • translate 
  • flex 布局

还是上代码比较实在

5. flex 布局实现

Flex是Flexible Box的缩写,意为”弹性布局”,父元素设置成flex 布局,可以将子元素设置为水平居中, (但是flex布局部分浏览器无法使用)

.container{ display: flex; justify-content: center}

3.给父元素添加伪类

行内元素水平、垂直居中

6. tabel-cell布局

实际项目中并不常见,故暂不提及。

:after{content:";width:0;height:100%;display:inline-block;vertical-align:middle;}

文字、图片水平、垂直居中

主要是利用

  1. text-align: center; //水平对齐方式
  2. display: table-cell;//以td形式渲染
  3. vertical-align: middle;//垂直对齐方式

图片 2图片 3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    * {
        padding: 0;
        margin: 10px 0 0 0;
    }

    div {
        width: 200px;
        height: 200px;
        border: solid 1px red;
    }

    img {
        width: 100px;
        height: 100px;
        border: 0px;
    }

    span {
        border: solid 1px blue
    }

    .div1 {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }

    .div2 {
        line-height: 200px;
        text-align: center;
        margin: 0 auto;
    }
</style>
<body>

<p>文字</p>
<div class="div1" title="行内元素水平垂直居中">
    文字水平垂直居中1
</div>

<p>文字</p>
<div class="div2" title="行内元素水平垂直居中">
    文字水平垂直居中2
</div>

<p>图片水平垂直居中</p>
<div class="div1" title="行内元素水平垂直居中">
    <img src="images/pro_1.jpg">
</div>

<p>span水平垂直居中</p>
<div class="div1" title="行内元素水平垂直居中">
    this is span
</div>
</body>
</html>

View Code

图片 4

 

4.块级元素已知宽高的话,利用定位和负边距,若不想脱离文档流,子元素可以设置相对定位

块级元素水平、垂直居中

.parent{position:relative;}

固定高度水平、垂直居中

固定高度水平垂直居中一般思路:

图片 5图片 6

.child{position:absolute;width:100px;height:100px;top:50%;margin-top:-50px;}

绝对定位与负边距

脱离文档流之后,在通过设置负的边距来达到水平、垂直居中效果;

图片 7图片 8

  <style>
        * {
            padding: 0;
            margin: 0 0 0 0;
            box-sizing: border-box;
        }

        p{margin:20px 0 0 20px;}

        /*绝对定位与负边距实现*/
        .divBox {

            height: 200px;
            border: solid 1px red;
            position: relative;
        }
        .divContentBox{
            width: 100px;
            height: 100px;
            border: solid 1px blue;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;

        }

    </style>

<p>绝对定位与负边距实现</p>
<div class="divBox">
    <div class="divContentBox">固定宽度、高度水平垂直居中</div>
</div>

View Code

版权声明:本文由龙竞技官网发布于龙竞技官网,转载请注明出处:css 水平、垂直居中