html div左右/垂直居中

最新推荐文章于 2023-01-10 15:55:39 发布

林夕_______

最新推荐文章于 2023-01-10 15:55:39 发布

阅读量1.6k

点赞数 1

分类专栏： Css 文章标签： div 居中

本文链接：https://blog.csdn.net/jinyt_/article/details/77203285

版权

Css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>div居中</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>
<style>
  body{
    padding:100px;
  }
  /*方法一：*/
  .father{
    border:1px solid #ddd;
    width:500px;
    height:200px;
    position: relative;
  }
  .child{
    background: #3dd;
    width:300px;

    /*垂直居中*/
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
  }

  /*方法二：*/
  .parent{
    margin-top:20px;
    border:1px solid #ddd;
    width:500px;
    height:200px;
    /*flex布局*/
    display: -webkit-flex;
    display: flex;
    /*垂直居中*/
    -webkit-align-items: center;
    align-items: center;
    /*左右居中*/
    -webkit-justify-content: center;
    justify-content: center;

  }
  .daughter{
    background: #34d;
    width:300px;
  }
</style>
<body>
<!--方法一：-->
<div class="father">
  <div class="child">
    方法一：
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus ipsam minus non reprehenderit voluptates!
    Ad aperiam aut placeat quo repellat velit? Iusto neque nihil pariatur provident quae quo, ratione sed!
  </div>
</div>
<!--方法二：-->
<div class="parent">
  <div class="daughter">
    方法二：
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse explicabo fugit illo impedit ipsa labore magnam
    minus modi, non quidem, quos ullam. Accusantium adipisci alias culpa expedita impedit perferendis temporibus.
  </div>
</div>
</body>
</html>

林夕_______

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html div左右/垂直居中

html>html lang="en">head> meta charset="utf-8"> title>div居中title> meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">head>style> bod
复制链接

扫一扫