欢迎使用优快云-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

原创最新推荐文章于 2021-01-07 23:01:28 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css-垂直水平居中

前端css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用相对定位实现一个div元素在其父级div元素内水平垂直居中的方法，并提供了具体的HTML和CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中div在另一个div水平垂直居中问题

css中水平居中相对垂直居中来说比较好实现，一般只需要设置margin-left,margin-right这两个属性，

margin-left:auto;
margin-right:auto;

以上两行代码就可以使当前的div处于水平居中，对于垂直居中，如果是相对怎个页面来说，可以用一下实现

margin:50% auto;

当然如果你想让一个div在另一个div水平垂直居中的话，以上的代码是不行的。

我们需要用其他方式实现，这里我提供一个方法，使用相对定位来实现的，以下为具体实现方式：
html代码：

<html>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  <body>
<html>

css代码：

.container{
  width:200px;
  height:200px;
  background-color:red;
  margin:50% auto;
}
.box{
width:100px;
height:100px;
position:relative;
left:50px;
top:50px;
}

以上代码就可以实现在一个div中的水平垂直居中了，大家可以根据自己的需求对参数进行调整，这里只是给大家一个思路！