让文字在盒子中水平居中与垂直居中

简单方法：

1.先用text-align: center;将文字垂直居中。

2.再用line-height: Xpx;将元素的行高设置为与父元素同样的高度。（这里的X代表父元素的高度）

举例：

对于该网页的代码如下：


html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文字水平居中与垂直居中title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
               width: 200px;
               height: 200px;
               background-color: blue;
            }
        style>
    head>
    <body>
        <div class="box1">
            <div class="box2"><p>大家好！p>div>
        div>
    body>
html>

此时我们对box2中的p元素设置如下样式（对于box2来说，box1是其父盒子，且box1的高度为200px，故box2的行高应该设置为200px）：


html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文字水平居中与垂直居中title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
               width: 200px;
               height: 200px;
               background-color: blue;
            }
            .box2 p{
                text-align: center;
                line-height: 200px;
            }
        style>
    head>
    <body>
        <div class="box1">
            <div class="box2"><p>大家好！p>div>
        div>
    body>
html>

效果图如下：

注意：我们在写网页的时候应该用以下代码初始化网页，因为默认有些元素存在内边距和外边距，这样我们看见的才是呈现出绝对水平垂直居中的效果。


*{
     margin: 0;
     padding: 0;
            }

相关阅读:
float32转float16
jquery实现两个input表单内容互换的解决方案
Adobe Premiere基础-编辑素材文件常规操作(脱机文件,替换素材,素材标签和编组,素材启用,便捷调节不透明度,项目打包)(十七)
《安卓安装包管理后台》——spring boot +vue3前后端项目实战专栏开篇
JavaEE——Servlet中的session
Mysql表的操作和数据类型
猿创征文｜2022年快过完了，是时候总结一下那些优秀的 React 组件库
小程序商城框架源码小程序源码带前端+后台+数据库
机器学习——监督学习：回归
React 入门：实战案例 TodoList 组件列表动态初始化

原文地址：https://blog.csdn.net/weixin_59155272/article/details/134448986