实现内部元素居中的三种方式,div居中显示。。。。。【龙哥】

 实现内部元素居中的三种方式,div居中显示。。。。。【龙哥】_第1张图片

 

 

 

 

doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现内部元素居中的三种方式title>
    <style>
        *{margin: 0; padding: 0;}
        h2{text-align: center; color: red;}
        h3{text-align: center; color: blue;}
        .clearfix:after{content: '';clear: both; display: block; overflow: hidden; height: 0;}

        /*方法一:传统方法通过固定宽度width: 1000px;和margin: 0 auto;来实现居中,
        *弊端:1.需要精确计算出box的宽度,
        *     2.当内部子元素需要增加或者减少的时候,这个宽度需要重新计算,比较麻烦。
        *     3.需要使用clear来清除浮动,解决因浮动产生的外部元素无法获取高度的尴尬问题。
        */
        .box-wrap0{position: relative; width: 100%; height: 100px; text-align: center; padding: 20px; line-height: 30px;}
        .box-wrap0 .box{position: relative; width: 1000px; margin: 0 auto; border: red 1px solid;}
        .box-wrap0 .box-item{width: 200px; float: left; background: #dedede;}


        /*
        *方法二:1.最里面的元素使用内联元素布局,2.外部元素使用margin: 0 auto; 可以轻松实现居中对齐
        */
        .box-wrap1{position: relative; width: 100%; height: 100px; padding: 20px; text-align: center; line-height: 30px;}
        .box-wrap1 .box{position: relative; margin: 0 auto; border: red 1px solid;}
        .box-wrap1 .box-item{width: 200px; display: inline-block; background: #dedede;}  /*内部元素为内联元素*/

        /*
        *方法三:1.最外部元素使用text-align: center; 2.给需要居中的元素display: inline-block;变成内联元素  3.给需要居中的元素float: left;,可以轻松实现居中对齐
        *优势:当内部元素需要增加或者减少时,仍然会自动居中
        */
        .box-wrap2{position: relative; width: 100%; text-align: center; margin-top: 50px; padding: 20px; line-height: 30px;}  /* 内容居中显示:text-align: center;*/
        .box-wrap2 .box{position: relative; display: inline-block; border: blue 1px solid;} /*需要居中的元素为内联元素*/
        .box-wrap2 .box-item{width: 200px; float: left; margin: 0 10px; background: #dedede;}




    style>
head>
<body>
<h2>实现内部元素居中的三种方式h2>
<div class="box-wrap0">
    <h3>方法一:固定宽度h3>
    <div class="box clearfix">
        <div class="box-item">按钮1div>
        <div class="box-item">按钮2div>
        <div class="box-item">按钮3div>
        <div class="box-item">按钮4div>
        <div class="box-item">按钮4div>
    div>
div>



<div class="box-wrap1">
    <div class="box">
        <h3>方法二:子元素为内联元素h3>
        <div class="box-item">按钮1div>
        <div class="box-item">按钮2div>
        <div class="box-item">按钮3div>
        <div class="box-item">按钮4div>
        <div class="box-item">按钮4div>
    div>
div>

<div class="box-wrap2">
    <div class="box">
        <h3>方法三:需要居中的元素display: inline-block;变成内联元素h3>
        <div class="box-item">点击1div>
        <div class="box-item">点击2div>
        <div class="box-item">点击3div>
        <div class="box-item">点击4div>
        <div class="box-item">点击4div>
    div>
div>

body>
html>

 

转载于:https://www.cnblogs.com/shimily/articles/10644280.html

你可能感兴趣的:(实现内部元素居中的三种方式,div居中显示。。。。。【龙哥】)