Imooc-613 前端面试全家桶
搜索 K

Appearance

11 居中对齐 ​

  • 居中对齐有哪些实现方式？

水平居中 ​

  • inline 行内元素：给父元素设置 text-align: center
  • block 块级元素：给块级元素设置 margin: 0 auto
  • absolute 绝对定位：给块级元素设置 position: absolute; left: 50%; margin-left: -宽度的一半; (宽度的一半需要用计算的方式得到)
  • absolute 绝对定位：给块级元素设置 position: absolute; left: 50%; transform: translateX(-50%); (宽度的一半需要用计算的方式得到)
  • flex 布局：给父元素设置 display: flex; justify-content: center;
  • grid 布局：给父元素设置 display: grid; justify-content: center;
查看代码
html
<div class="container container-1">
  <span>一段文字</span>
</div>

<div class="container container-2">
  <div class="item">this is block item</div>
</div>

<div class="container container-3">
  <div class="item">this is absolute item</div>
</div>

<div class="container container-4">
  <div class="item">this is absolute item</div>
</div>

<div class="button-container">
  <button onclick="centerInline()">Center Inline</button>
  <span>给 inline 行内元素的父元素 .container-1 添加 text-align: center; 属性</span>
  <br />
  <button onclick="centerBlock()">Center Block</button>
  <span>给块级元素 .container-2 .item 添加 margin: 0 auto; 属性</span>
  <br />
  <button onclick="centerAbsoluteMargin()">Center Absolute (Margin)</button>
  <span>给块级元素 .container-3 .item 添加 position: absolute; left: 50%; margin-left: -150px; 属性</span>
  <br />
  <button onclick="centerAbsoluteTransform()">Center Absolute (Transform)</button>
  <span>给块级元素 .container-4 .item 添加 position: absolute; left: 50%; transform: translateX(-50%); 属性</span>
  <br />
  <button onclick="centerFlex()">Center Flex</button>
  <span
    >给所有父元素 .container 添加 display: flex; justify-content: center; align-items: center; 属性，并使 .item
    内部文字水平居中</span
  >
  <br />
  <button onclick="centerGrid()">Center Grid</button>
  <span
    >给所有父元素 .container 添加 display: grid; justify-content: center; align-items: center; 属性，并使 .item 和
    .container-1 > span 内部文字水平居中</span
  >
  <br />
  <button onclick="resetStyles()">Reset Styles</button>
  <span>恢复所有元素的默认样式</span>
</div>
css
.container {
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
}
.item {
  background-color: #ccc;
}
.container-1 {
}

.container-2 .item {
  width: 500px;
}

.container-3,
.container-4 {
  position: relative;
  height: 100px;
}
.container-3 .item,
.container-4 .item {
  width: 300px;
  height: 100px;
  position: absolute;
}

.button-container {
  margin-top: 20px;
}
.button-container button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}
.button-container button:hover {
  background-color: #0056b3;
}
js
function setStyle(selector, styles) {
  const elements = document.querySelectorAll(selector)
  elements.forEach((element) => {
    for (const [property, value] of Object.entries(styles)) {
      element.style[property] = value
    }
  })
}

function centerInline() {
  setStyle('.container-1', { textAlign: 'center' })
}

function centerBlock() {
  setStyle('.container-2 .item', { margin: '0 auto' })
}

function centerAbsoluteMargin() {
  setStyle('.container-3 .item', {
    left: '50%',
    marginLeft: '-150px', // width 的一半是 150px
  })
}

function centerAbsoluteTransform() {
  setStyle('.container-4 .item', {
    left: '50%',
    transform: 'translateX(-50%)',
  })
}

function centerFlex() {
  setStyle('.container', {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  })
  setStyle('.item, .container-1 > span', {
    textAlign: 'center',
  })
}

function centerGrid() {
  setStyle('.container', {
    display: 'grid',
    justifyContent: 'center',
    alignItems: 'center',
  })
  setStyle('.item, .container-1 > span', {
    justifySelf: 'center',
    textAlign: 'center', // 水平居中每个子元素
  })
}
function resetStyles() {
  setStyle('.container', {
    textAlign: '',
    display: '',
    justifyContent: '',
    alignItems: '',
  })

  setStyle('.item, .container-1 > span', {
    margin: '',
    left: '',
    marginLeft: '',
    transform: '',
    justifySelf: '',
    textAlign: '',
  })
}

垂直居中 ​

  • inline 行内元素：给父元素设置 light-height: 高度的值; (高度需要用计算的方式得到)
  • block 块级元素：给块级元素设置 position: absolute; top: 50%; margin-top: -高度的一半; (高度的一半需要用计算的方式得到)
  • absolute 绝对定位：给块级元素设置 position: absolute; top: 50%; transform: translateY(-50%); (高度的一半需要用计算的方式得到)
  • absolute 绝对定位：给块级元素设置 top: 0; bottom: 0; margin: auto 0;
  • flex 布局：给父元素设置 display: flex; align-items: center;
  • grid 布局：给父元素设置 display: grid; align-items: center;
查看代码
html
<div class="container-section">
  <div class="container container-1">
    <span>一段文字</span>
  </div>

  <div class="container container-2">
    <div class="item">this is item</div>
  </div>

  <div class="container container-3">
    <div class="item">this is item</div>
  </div>

  <div class="container container-4">
    <div class="item">this is item</div>
  </div>
</div>

<div class="button-section">
  <div class="button-container">
    <button onclick="centerInline()">Center Inline</button>
    <span>给 inline 行内元素的父元素 .container-1 添加 line-height: 高度的值; 属性</span>
    <br />
    <button onclick="centerBlock()">Center Block</button>
    <span>给块级元素 .container-2 .item 添加 position: absolute; top: 50%; margin-top: -高度的一半; 属性</span>
    <br />
    <button onclick="centerAbsoluteTransform()">Center Absolute (Transform)</button>
    <span>给块级元素 .container-3 .item 添加 position: absolute; top: 50%; transform: translateY(-50%); 属性</span>
    <br />
    <button onclick="centerAbsoluteAuto()">Center Absolute (Auto Margin)</button>
    <span>给块级元素 .container-4 .item 添加 position: absolute; top: 0; bottom: 0; margin: auto 0; 属性</span>
    <br />
    <button onclick="centerFlex()">Center Flex</button>
    <span>给所有父元素 .container 和 .item 添加 display: flex; align-items: center; 属性</span>
    <br />
    <button onclick="centerGrid()">Center Grid</button>
    <span>给所有父元素 .container 和 .item 添加 display: grid; align-items: center; 属性</span>
    <br />
    <button onclick="resetStyles()">Reset Styles</button>
    <span>恢复所有元素的默认样式</span>
  </div>
</div>
css
body {
  display: flex;
}
.container-section,
.button-section {
  padding: 5px;
}
.container-section {
  width: 25%;
}
.button-section {
  width: 75%;
}
.container {
  border: 1px solid #ccc;
  margin: 10px;
  height: 100px;
}
.item {
  background-color: #ccc;
}

.container-1 {
  /* text-align: center; */
}

.container-2,
.container-3,
.container-4 {
  position: relative;
}
.container-2 .item {
  width: 100px;
  height: 50px;
  position: absolute;
}

.container-3 .item {
  width: 100px;
  height: 50px;
  position: absolute;
}

.container-4 .item {
  width: 100px;
  height: 50px;
  position: absolute;
}

.button-container {
  margin-top: 20px;
}

.button-container button {
  padding: 10px;
  margin: 5px;
  border: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}
.button-container button:hover {
  background-color: #0056b3;
}

.button-container span {
  font-size: 12px;
}
js
function setStyle(selector, styles) {
  const elements = document.querySelectorAll(selector)
  elements.forEach((element) => {
    for (const [property, value] of Object.entries(styles)) {
      element.style[property] = value
    }
  })
}

function centerInline() {
  setStyle('.container-1', { lineHeight: '100px' })
}

function centerBlock() {
  setStyle('.container-2 .item', {
    top: '50%',
    marginTop: '-25px', // 高度的一半是 50px
  })
}

function centerAbsoluteTransform() {
  setStyle('.container-3 .item', {
    top: '50%',
    transform: 'translateY(-50%)',
  })
}

function centerAbsoluteAuto() {
  setStyle('.container-4 .item', {
    top: '0',
    bottom: '0',
    margin: 'auto 0',
  })
}

function centerFlex() {
  setStyle('.container', {
    display: 'flex',
    alignItems: 'center',
  })
  setStyle('.item', {
    display: 'flex',
    alignItems: 'center',
  })
}

function centerGrid() {
  setStyle('.container', {
    display: 'grid',
    alignItems: 'center',
  })
  setStyle('.item', {
    display: 'grid',
    alignItems: 'center',
  })
}

function resetStyles() {
  setStyle('.container', {
    lineHeight: '',
    display: '',
    justifyContent: '',
    alignItems: '',
  })

  setStyle('.item, .container-1 > span', {
    top: '',
    bottom: '',
    marginTop: '',
    transform: '',
    margin: '',
    textAlign: '',
    justifySelf: '',
  })
}

水平垂直居中 ​

  • inline 行内元素：给父元素设置 text-align: center; line-height: 高度的值; (高度需要用计算的方式得到)
  • block 块级元素：给块级元素设置 position: absolute; top: 50%; left: 50%; margin-top: -高度的一半; margin-left: -宽度的一半; (高度的一半和宽度的一半需要用计算的方式得到)
  • absolute 绝对定位：给块级元素设置 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); (高度的一半和宽度的一半需要用计算的方式得到)
  • absolute 绝对定位：给块级元素设置 top: 0; bottom: 0; left: 0; right: 0; margin: auto;
  • flex 布局：给父元素设置 display: flex; justify-content: center; align-items: center;
  • grid 布局：给父元素设置 display: grid; place-items: center;
查看代码
html
<div class="container-section">
  <div class="container container-1">
    <span>一段文字</span>
  </div>

  <div class="container container-2">
    <div class="item">this is item</div>
  </div>

  <div class="container container-3">
    <div class="item">this is item</div>
  </div>

  <div class="container container-4">
    <div class="item">this is item</div>
  </div>
</div>

<div class="button-section">
  <div class="button-container">
    <button onclick="centerInline()">Center Inline</button>
    <span>给 inline 行内元素的父元素 .container-1 添加 text-align: center; line-height: 高度的值; 属性</span>
    <br />
    <button onclick="centerBlock()">Center Block</button>
    <span
      >给块级元素 .container-2 .item 添加 position: absolute; top: 50%; left: 50%; margin-top: -高度的一半; margin-left:
      -宽度的一半; 属性</span
    >
    <br />
    <button onclick="centerAbsoluteTransform()">Center Absolute (Transform)</button>
    <span
      >给块级元素 .container-3 .item 添加 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      属性</span
    >
    <br />
    <button onclick="centerAbsoluteAuto()">Center Absolute (Auto Margin)</button>
    <span
      >给块级元素 .container-4 .item 添加 position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
      属性</span
    >
    <br />
    <button onclick="centerFlex()">Center Flex</button>
    <span>给所有父元素 .container 和 .item 添加 display: flex; justify-content: center; align-items: center; 属性</span>
    <br />
    <button onclick="centerGrid()">Center Grid</button>
    <span>给所有父元素 .container 和 .item 添加 display: grid; place-items: center; 属性</span>
    <br />
    <button onclick="resetStyles()">Reset Styles</button>
    <span>恢复所有元素的默认样式</span>
  </div>
</div>
css
body {
  display: flex;
}
.container-section,
.button-section {
  padding: 5px;
}
.container-section {
  width: 25%;
}
.button-section {
  width: 75%;
}
.container {
  border: 1px solid #ccc;
  margin: 10px;
  height: 100px;
}
.item {
  background-color: #ccc;
}

.container-1 {
  /* text-align: center; */
}

.container-2,
.container-3,
.container-4 {
  position: relative;
}
.container-2 .item {
  width: 100px;
  height: 50px;
  position: absolute;
}

.container-3 .item {
  width: 100px;
  height: 50px;
  position: absolute;
}

.container-4 .item {
  width: 100px;
  height: 50px;
  position: absolute;
}

.button-container {
  margin-top: 20px;
}

.button-container button {
  padding: 10px;
  margin: 5px;
  border: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}
.button-container button:hover {
  background-color: #0056b3;
}

.button-container span {
  font-size: 12px;
}
js
function setStyle(selector, styles) {
  const elements = document.querySelectorAll(selector)
  elements.forEach((element) => {
    for (const [property, value] of Object.entries(styles)) {
      element.style[property] = value
    }
  })
}

function centerInline() {
  setStyle('.container-1', {
    textAlign: 'center',
    lineHeight: '100px', // 高度的值
  })
}

function centerBlock() {
  setStyle('.container-2 .item', {
    top: '50%',
    left: '50%',
    marginTop: '-25px', // 高度的一半
    marginLeft: '-50px', // 宽度的一半
  })
}

function centerAbsoluteTransform() {
  setStyle('.container-3 .item', {
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  })
}

function centerAbsoluteAuto() {
  setStyle('.container-4 .item', {
    top: '0',
    bottom: '0',
    left: '0',
    right: '0',
    margin: 'auto',
  })
}

function centerFlex() {
  setStyle('.container', {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  })
  setStyle('.item', {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  })
}

function centerGrid() {
  setStyle('.container', {
    display: 'grid',
    placeItems: 'center',
  })
  setStyle('.item', {
    display: 'grid',
    placeItems: 'center',
  })
}

function resetStyles() {
  setStyle('.container', {
    lineHeight: '',
    textAlign: '',
    display: '',
    justifyContent: '',
    alignItems: '',
  })

  setStyle('.item, .container-1 > span', {
    top: '',
    bottom: '',
    left: '',
    right: '',
    marginTop: '',
    marginLeft: '',
    transform: '',
    margin: '',
    justifyContent: '',
    placeItems: '',
  })
}