css盒子居中布局的几种方式以及内容首尾对齐

最新推荐文章于 2023-04-24 13:43:32 发布

Pinia_0819

最新推荐文章于 2023-04-24 13:43:32 发布

阅读量326

点赞数 1

分类专栏： css3 文章标签： css css3 javascript

本文链接：https://blog.csdn.net/weixin_50466102/article/details/125875537

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css盒子居中布局的几种方式以及内容首尾对齐下面赋全部代码

<!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>测试样式</title>
</head>
<body>
    <div class="box center">
        <span>姓名</span>
        <span>性别</span>
        <span>身份证号码</span>
        <span>家庭地址</span>
        <span>联系人</span>
    </div>
</body>
<style>
    /* 上下左右居中 */
    .box{
        width: 200px;
        height: 150px;
        background-color:aliceblue;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* 方法一 */
    .center {
        position: absolute; 
        margin: auto; 
        left: 0; 
        right: 0; 
        top: 0; 
        bottom: 0;
    }
    /* 方法二 */
    .center {
        position: absolute; 
        left: 50%;  
        top: 50%; 
        margin-left: -100px;
        margin-top: -75px;
    }
     /* 方法三 */
     .center {
        position: absolute; 
        left: 50%;  
        top: 50%; 
        transform: translate(-50%, -50%);
    }
     /* 方法四 给父盒子添加 flex布局*/
    /* body {
        height: 930px;
        display: flex;
        justify-content:center;
        align-items:center;
    } */
    /* 字体首尾对齐核心代码 */
    span {
        width: 180px;
		text-align-last: justify;
		text-align: justify;
		text-justify: distribute-all-lines;
    }
</style>
</html>