居中问题总结

PiiPiiKity

于 2021-02-07 15:35:30 发布

阅读量127

点赞数

分类专栏：第一部分 HTML+CSS 文章标签： css html flex

本文链接：https://blog.csdn.net/weixin_44790641/article/details/113741538

版权

第一部分 HTML+CSS 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

1.元素内容水平居中：

text-align:center;

2.块级元素水平居中：

margin:0 auto

3.一行文字垂直居中：

行高等于高

4.多行内容垂直居中：

margin:20px 0; （加在自己上）
padding:20px 0; (加在父元素上)

5.子元素在父元素中水平垂直居中：

（1）margin：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .box{
           width: 300px;
           height: 300px;
           background-color: palevioletred;
           overflow: hidden;
       }
       .box1{
           width: 100px;
           height: 100px;
           background-color: deepskyblue;
           margin: 100px auto;
       }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
</div>
</body>
</html>

（2）position：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .box{
           width: 300px;
           height: 300px;
           background-color: palevioletred;
           position: relative;
       }
       .box1{
           width: 100px;
           height: 100px;
           background-color: deepskyblue;
           position: absolute;
           left: 100px;
           top: 100px;
       }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
</div>
</body>
</html>

（3）padding：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .box{
           width: 300px;
           height: 300px;
           background-color: palevioletred;
           padding: 100px;
           box-sizing: border-box;
       }
       .box1 {
           width: 100px;
           height: 100px;
           background-color: deepskyblue;
       }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
</div>
</body>
</html>

（4）表格法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .box{
           width: 300px;
           height: 300px;
           background-color: palevioletred;
           display: table-cell;
           vertical-align: middle;
       }
       .box1 {
           width: 100px;
           height: 100px;
           background-color: deepskyblue;
           margin: 0 auto;
       }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
</div>
</body>
</html>

（5）绝对定位法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .box{
           width: 300px;
           height: 300px;
           background-color: palevioletred;
           position: relative;
       }
       .box1 {
           width: 100px;
           height: 100px;
           background-color: deepskyblue;
           position: absolute;
           top: 50%;
           left: 50%;
           margin-left: -50px;
           margin-top: -50px;
       }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
</div>
</body>
</html>

（6）弹性盒法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .box{
           width: 300px;
           height: 300px;
           background-color: palevioletred;
           display: flex;
           justify-content: center;
           align-items: center;
       }
       .box1 {
           width: 100px;
           height: 100px;
           background-color: deepskyblue;
       }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
</div>
</body>
</html>

在这里插入图片描述

PiiPiiKity

关注

0
点赞
踩
1

收藏

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

1.元素内容水平居中：text-align:center;2.块级元素水平居中：margin:0 auto3.一行文字垂直居中：行高等于高4.多行内容垂直居中：margin:20px 0; （加在自己上）padding:20px 0; (加在父元素上)5.子元素在父元素中水平垂直居中：1)子元素宽高已知：（1）margin：<!DOCTYPE html><html lang="en"><head> <met
复制链接

扫一扫

专栏目录