欢迎使用CSDN-markdown编辑器

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中的水平垂直居中了,大家可以根据自己的需求对参数进行调整,这里只是给大家一个思路!

你可能感兴趣的:(前端css,css-垂直水平居中)