css实现水平垂直居中的七种方式

css实现水平垂直居中的七种方式

  • 一、使用grid布局
  • 二、使用flex布局
  • 三、使用定位+外边距
  • 四、使用定位+平移
  • 五、使用外边距 + 平移
  • 六、使用文本对齐 + 行高
  • 七、使用表格单元

一、使用grid布局

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        display: grid;
        place-items: center;
        /* place-items等于justify-items:center; +  align-items:center;*/
      }
      #inside {
        width: 50px;
        height: 50px;
        background: #96f2d7;
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">div>
    div>
  body>
html>

css实现水平垂直居中的七种方式_第1张图片

二、使用flex布局

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 400px;
        height: 400px;
        background: #000;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #inside {
        width: 100px;
        height: 100px;
        background: #ffc9c9;
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">div>
    div>
  body>
html>

css实现水平垂直居中的七种方式_第2张图片

三、使用定位+外边距

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 300px;
        height: 300px;
        background: #000;
        position: relative;
      }
      #inside {
        width: 100px;
        height: 100px;
        background: #eebefa;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        margin: auto;
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">div>
    div>
  body>
html>

css实现水平垂直居中的七种方式_第3张图片

四、使用定位+平移

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        position: relative;
      }
      #inside {
        width: 50px;
        height: 50px;
        background: #a5d8ff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">div>
    div>
  body>
html>

css实现水平垂直居中的七种方式_第4张图片

五、使用外边距 + 平移

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        overflow: hidden;
        /* overflow: hidden;是为了防止父子元素的margin-top重合 */
      }
      #inside {
        width: 50px;
        height: 50px;
        background: #ffffb8;
        margin: 50% auto;
        transform: translateY(-50%);
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">div>
    div>
  body>
html>

css实现水平垂直居中的七种方式_第5张图片

六、使用文本对齐 + 行高

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        text-align: center;
        line-height: 200px;
        vertical-align: middle;
      }
      #inside {
        color: #e9ecef;
        display: inline;
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">只适用于行内元素div>
    div>
  body>
html>

css实现水平垂直居中的七种方式_第6张图片

七、使用表格单元

DOCTYPE html>
<html lang="en">
  <head>
    <title>testtitle>
    <style>
      #outside {
        width: 200px;
        height: 200px;
        background: #000;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }
      #inside {
        color: #ffdeeb;
      }
    style>
  head>
  <body>
    <div id="outside">
      <div id="inside">只适用于行内元素div>
    div>
  body>
html>

css实现水平垂直居中的七种方式_第7张图片

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