常用的实现元素水平垂直居中的方法

常用的实现元素水平垂直居中的方法

1. 利用绝对定位、设置4个方向上的值都为0,然后设置 margin:auto。由于宽高固定,所有方向实现平分

 <style>
    * {
      
      margin: 0;
      padding: 0;
    }
    
    html, body, .wrapper {
      
      width: 100%;
      height: 100%;
    }  /*使父元素有高度*/
    
    .wrapper{
      
      position: relative;
    }

    .box{
      
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: coral;
    }
  style>
head>
<body>
  <div class="wrapper">
    <div class="box">hellodiv>
  div>
body>

2. 利用绝对定位,设置top 和 left方向上的值都为 50%,然后利用 transfrom: translate(-50%, -50%);

  <style>
    *{
      
      padding: 0px;
      margin: 0px;
    }
    
    html,body,.wrapper{
      
      width: 100%;
      height: 100%;
    }

    .wrapper{
      
      position: relative;
    }

    .box{
      
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: coral;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
  style>
head>
<body>
  <div class="wrapper">
    <div class="box">hellodiv>
  div>
body>
  

以上两种方式的实现效果均为:
常用的实现元素水平垂直居中的方法_第1张图片

3. 使用display:inline-block; ,然后在父元素上加 text-aligen:center;

 <style>
   *{
      
      padding: 0px;
      margin: 0px;
    }

    .wrapper{
      
      width: 500px;
      height: 500px;
      background: yellow;
    }
    
    .wrapper{
      
      text-align: center;
      line-height: 500px;  
    }

    .box{
      
      width: 100px;
      height: 100px;
      display: inline-block;
      background-color: aqua;
    }
  style>
<body>
 <div class="wrapper">
   <div class="box">div>
 div>

常用的实现元素水平垂直居中的方法_第2张图片

4.实现一个div的水平居中,利用margin:0,auto;

<style>
    .box{
      
      width: 100px;
      height: 100px;
      margin: 0 auto;
      background: aqua;
    }
  style>
head>
<body>
  <div class="box">nihaodiv>
body>

常用的实现元素水平垂直居中的方法_第3张图片

5.实现文本元素的水平垂直居中

 <style>
    .box{
      
      width: 100px;
      height: 100px;
      margin: 0 auto;
      background: aqua;
      text-align: center;
      line-height: 100px;
    }
  style>
head>
<body>
  <div class="box">nihaodiv>
body>

常用的实现元素水平垂直居中的方法_第4张图片
以上就是我总结的五中实现元素居中的方法,后续如果再学到其它的方法,我会继续补充。

你可能感兴趣的:(css,html)