居中面试问题

前端常问居中面试问题

css文本居中

文本水平居中

<div class="father">
    <div class="child"><div>
<div>

子类元素为行内元素，则给父类元素定义text-align:center

如果子元素是块元素，则给子元素定义margin：0 auto；

如果子元素是块级元素，可以通过display将子元素定义成行内元素，在给子元素定义text-align:center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        .father {
            width: 800px;
            height: 800px;
            background-color: skyblue;
        }
        .child {
            display: block;
            text-align: center;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="father">
        <span class="child">我是一棵小小小小草奥</span>

    </div>
</body>
</html>

在这里插入图片描述

如果margin：0 auto；加在父元素上，则父元素相对与body水平居中。text-align是作用于自身

文本垂直居中

<div>hello word </div>

例如这个高为100px，让文本居中你需要两个条件

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

这里display必须是table-cell

是table-cell会控制这个盒子的宽度为里面text的宽度，并不是真正可以设置宽高

另一种方法是，对单行文本的垂直居中可以将行高line-height设置为盒子的高度

给盒子做居中

盒子水平居中

margin：auto

盒子垂直居中，不能用margin，可以用定位或者flex布局实现或者浮动

用定位实现常见的父子盒子都是块元素的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        .father {
            width: 800px;
            height: 800px;
            background-color: skyblue;
            position: relative;
        }
        .child {
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            position: absolute;
            background-color: orange;

        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        .father {
            width: 800px;
            height: 800px;
            background-color: skyblue;
            position: relative;//父元素开启相对定位
        }
        .child {
            width: 200px;
            height: 200px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto; //居中关键就是外边距为auto
            position: absolute; //子元素开启固定定位
            background-color: orange;

        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child"></div>
    </div>
</body>
</html>

方式不一样但是呈现的样式是一样的

在这里插入图片描述

弹性盒子居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        .father {
            width: 800px;
            height: 800px;
            display: flex; //这里必须要开启弹性盒子
            justify-content: center; //水平居中
            align-items: center;//垂直居中
            background-color: skyblue;
        }
        .child {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child"></div>
    </div>
</body>
</html>