水平垂直居中

作者: lx_smile | 来源:发表于2017-11-08 19:51 被阅读0次

CSS居中布局方案
常用的居中方法
元素居中的方式
css居中方式总结（亲测有效）
CSS水平垂直居中总结
居中布局
CSS图片居中(水平居中和垂直居中)
css多行垂直水平居中--table布局大法
CSS居中大全(带截图)
居中对齐

方法1

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .main{
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid #465468;
 }
 .inner{
      position: absolute;
      background:red;
      width:100px;
      height:100px;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }
    </style>
</head>
<body>
<div class = "main">
   <div class = "inner"></div>
</div>
</body>
</html>

方法2

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .main{
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid #465468;
 }
 .inner{
      position: absolute;
      background:red;
      width:100px;
      height:100px;
      top: 50%;
      left: 50%;
      margin-top: -50px; 
      margin-left: -50px; 
     
 }
    </style>
</head>
<body>
<div class = "main">
   <div class = "inner"></div>
</div>
</body>
</html>

方法3

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .main{
      width: 300px;
      height: 300px;
      border: 1px solid #465468;
      align-items:center;
      justify-content:center;
      display:flex;
 }
 .inner{
      background:red;
      width:100px;
      height:100px;
     
     
 }
    </style>
</head>
<body>
<div class = "main">
   <div class = "inner"></div>
</div>
</body>
</html>