css设置div水平居中方法

CSS设置div水平居中的方法：
1、给div元素设置“margin: 0 auto”样式；
2、在父级div元素里设置“text-align: center”样式，在子一级div元素里设置“display: inline-block”样式。

1、外边距自适应
方式：元素绑定属性：margin: 0 auto;

<template>
  <div class="div-parent">
    <div class="div-child"></div>
  </div>
</template>

<style lang="less" scoped>
  .div-parent {
    width: 400px;
    height: 200px;
    background-color: #aaa;
  }
  .div-child {
    width: 100px;
    height: 50px;
    background-color: #007FFF;
    margin: 0 auto;
  }
<style>

展示效果：

注意：方法1：常用，适用于已知父级元素宽度的情况
2、行内块元素
方式：父级元素设置属性：text-align: center;
子一级元素设置属性：display: inline-block;

<template>
  <div class="div-parent">
    <div class="div-child"></div>
  </div>
</template>

<style lang="less" scoped>
  .div-parent {
    width: 400px;
    height: 200px;
    background-color: #aaa;
    text-align: center;
  }
  .div-child {
    width: 100px;
    height: 50px;
    background-color: #007FFF;
    display: inline-block;
  }
<style>

展示效果：