水平居中、垂直居中

最新推荐文章于 2023-12-25 14:42:01 发布

温婉婉

最新推荐文章于 2023-12-25 14:42:01 发布

阅读量164

点赞数

分类专栏： div HTML CSS3 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_48796690/article/details/127230750

版权

HTML 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

div

16 篇文章 0 订阅

订阅专栏

CSS3

16 篇文章 0 订阅

订阅专栏

一、文字

文字水平居中：

text-align: center;

文字垂直居中:

line-height:值和该容器的高度一样

二、元素

元素水平居中：

margin: auto;

元素垂直居中：

让元素垂直居中，对外边的大盒子用padding,这个例子中对大盒子就用的是padding是100px

代码如下，自行体会：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .content {
            width: 500px;
            height: 400px;
            border: 1px solid blue ;
            box-sizing: border-box;
            /* padding 的计算方法：400/2-200/2=100px */
            /* padding: 100px; */
           
        }
        .shuohua{ 
            width: 300px ;
            height: 200px;
            background-color: red;
            box-sizing: border-box;
            /* 让文字水平居中 */
            /* text-align: center; */
            /* 让文字垂直居中 */
            /* line-height: 200px; */

            /* 让元素水平居中 */
            /* margin: auto; */
            /* 让元素垂直居中，对外边的大盒子用padding,这个例子中对大盒子就用的是padding是100px */
        }
    </style>

  <div class="content">

<div class="shuohua">
    说话
</div>

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