当前位置：首页 > 建站学院 > 前端开发 > CSS3 FLEXBOX轻松实现元素的水平居中和垂直居中
CSS3 FLEXBOX轻松实现元素的水平居中和垂直居中

前端开发发布日期：2023年05月29日浏览次数：51次
 <!DOCTYPE html>
 <html>
 
     <head>
         <meta charset="UTF-8">
         <title></title>
     </head>
 
     <body>
         <!--1.清除输入框内的空格-->
         <!--<input type="text" onBlur="replaceSpace(this)" />
         <script type="text/javascript">
             function replaceSpace(obj) {
                 obj.value = obj.value.replace(/\s/gi, '')
             }
         </script>-->
 
         <!--2.CSS3 FLEXBOX轻松实现元素的水平居中和垂直居中-->
         <!--①单个元素水平居中-->
         <!--<style>
             .box{
                 display: -webkit-flex;
                 display: -ms-flexbox;
                 display: flex;
                 justify-content: center;
                 background: #0099cc;
             }
             h1{
                 color: #FFF
             }
         </style>
         <div class="box">
             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
         </div>-->
 
         <!--②多个h1元素水平居中-->
         <!--<style>
             .box{
                 display: flex;
                 justify-content: center;
                 width: 100%;
                 background: #0099cc
             }
             h1{
                 font-size: 1rem;
                 padding: 1rem;
                 border: 1px dashed #FFF;
                 color: #FFF;
                 font-weight: normal;
             }
         </style>
         <div class="box">
             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
         </div>-->
 
         <!--③多个h1标签并排垂直居中-->
         <!--<style>
             .box{
                 display: flex;
                 width: 980px;
                 height: 30rem;
                 align-items:center;
                 background: #0099cc
             }
             h1{
                 font-size: 1rem;
                 padding: 1rem;
                 border: 1px dashed #FFF;
                 color: #FFF
             }
         </style>
         <div class="box">
             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
             <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
         </div>-->
 
         <!--④同时包含水平，垂直居中-->
         <!--<style>
             body{display: flex;justify-content:center}
             .box{
                 display: flex;
                 width: 980px;
                 height: 30rem;
                 justify-content:center;
                 background: #0099cc;
                 flex-direction:column;
                 align-items:center;
             }
             h1{
                 display: flex;
                 justify-content:center;
                 font-size: 1rem;
                 padding: 1rem;
                 border: 1px dashed #FFF;
                 color: #FFF;
                 width: 28rem
             }
         </style>
         <div class="box">
             <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
             <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
             <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
             <h1>flex弹性布局justify-content属性实现元素垂直居中</h1>
         </div>-->
 
         <!--3.CSS3中的px,em,rem,vh,vw辨析-->
         <!--1、px：像素，精确显示
         2、em：继承父类字体的大小，相当于“倍”，如：浏览器默认字体大小为16px=1em，始终按照div继承来的字体大小显示，进场用于移动端
           em换算工具：http://www.runoob.com/tags/ref-pxtoemconversion.html
         3、rem：与em类似，rem是继承根节点的属性（即<html>标签），其他的与em相同
         4、vh：当前可见高度的1%=1vh
                  区别是：当div中没有内容时，height=100%，则高度不显示出来
                当div中没有内容时，height=100vh，则高度依然能显示出来
         5、vw：当前可见宽度的1%=1vw
                区别是：当div中没有内容时，width=100%，则宽度不显示出来
                当div中没有内容时，width=100vh，则宽度依然能显示出来-->
 
         <!--4.CSS全局控制-->
         <!--<style>
             body {
                 margin: 0;
                 padding: 0;
                 font-size: 14px;
                 line-height: 22px;
                 height: auto;
                 font-family: "微软雅黑";
                 color: #3e3938;
                 -webkit-text-size-adjust: none;
             }
             body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,dt,img,form {
                 padding: 0px;
                 margin: 0px;
                 border: 0;
                 font-size: 14px;
             }
             .clear {
                 clear: both;
             }
             a:link,
             a:visited {
                 text-decoration: none;
             }
             a:hover {
                 text-decoration: none;
             }
             a:focus {
                 outline: none;
             }
             a {
                 text-decoration: none;
                 blr: expression(this.onFocus=this.blur());
             }
             a {
                 outline: none;
             }
             ul,
             ol li {
                 list-style: none;
             }
         </style>-->
 
         <!--5.css水平垂直居中（绝对定位居中）-->
         <!--<style>
             #box {
                 position: relative;
                 height: 500px;
                 background: #ddd;
             }
             .child {
                 width: 100px;
                 height: 100px;
                 background: #269ABC;
                 margin: auto;
                 position: absolute;
                 top: 0;
                 right: 0;
                 bottom: 0;
                 left: 0;
             }
         </style>
         <div >
             <div class="child"></div>
         </div>-->
 
         <!--6.css水平垂直居中（绝对定位居中）-->
         <!--<style type="text/css">
             ul li
             {
                 list-style-type:georgian;
                 text-align:left;
              }
             .mark
             {
                 width:140px;
                 height:40px;
                 color:Olive;
                 text-align:center;
                 line-height:40px;
                 margin:5px;
                 float:left;
              }
               .redball
             {
                 width:40px;
                 height:40px;
                 border-radius:20px;
                 background-color:Red;
                 text-align:center;
                 line-height:40px;
                 margin:5px;
                 float:left;
             }
             .ball
             {
                 width:40px;
                 height:40px;
                 border-radius:20px;
                 background-color:Aqua;
                 text-align:center;
                 line-height:40px;
                 margin:5px;
                 float:left;
             }
             .line
             {
                 clear:left;
              }
             header
             {
                 height:80px;
                 border:1px solid gray;
             }
             .left
             {
                 border:1px solid gray;
                 float:left;
                 width:30%;
                 height:480px;
                 margin-left:0px;
                 margin-right:0px;
                 
             }
             aside
             {
                 text-align:center;
             }
             section
             {
                 width:69.5%;
                 float:left;
                 height:480px;
                 border:1px solid gray;
                 margin-left:0px;
                 margin-right:0px;
             }
             footer
             {
                 clear:left;
                 height:60px;
                 border:1px solid gray;
             }
             input[type="button"]
             {
                 width:80px;
                 text-align:center;
                 margin-top:10px;
              }
         </style>
         
         <header>
             <h1>直接插入排序(Straight Insertion Sort)Demo</h1>
         </header>
         <aside class="left">
         
             <input type="button"  />
             <br />
             <input type="button"  />
             <br />
             <input type="button"  />
             <br />
             <h3>直接插入排序(Straight Insertion Sort)</h3>
             <ul>
                 <li>将一个记录插入到已排序好的有序表中，从而得到一个新，记录数增1的有序表。</li>
                 <li>即：先将序列的第1个记录看成是一个有序的子序列，然后从第2个记录逐个进行插入，直至整个序列有序为止。</li>
                 <li>如果碰见一个和插入元素相等的，那么插入元素把想插入的元素放在相等元素的后面。所以，相等元素的前后顺序没有改变。</li>
                 <li>从原无序序列出去的顺序就是排好序后的顺序，所以插入排序是稳定的。</li>
                 <li>时间复杂度O(n<sup>2</sup>)</li>
             </ul>
         </aside>
         <section >
         
         </section>
         <footer>
             这是底部信息
         </footer>
         <script type="text/javascript">
             function initDiv() {
                 var mainArea = document.getElementById("mainArea");
                 for (var i = 0; i < 8; i++) {
                     var newDivLine = document.createElement("div");
                     newDivLine.setAttribute("class", "line");
                     mainArea.appendChild(newDivLine);
                     for (var j = 0; j < 9; j++) {
                         var newDiv = document.createElement("div");
                         var id = i.toString() + j.toString();
                         newDiv.setAttribute("id", id);
                         if (j < 8) {
                             newDiv.setAttribute("class", "ball");
                         } else {
                             newDiv.setAttribute("class", "mark");
                         }
                         newDivLine.appendChild(newDiv);
                     }
                 }
             }
     
             //初始元素赋值
             var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1];
             function setElementsValue() {
                 for (var i = 0; i < arrTmp.length; i++) {
                     document.getElementById("0" + i.toString()).innerText = arrTmp[i];
                 }
                 document.getElementById("08").innerText = "原始数据";
             }
     
             //排序
             function setSISortValue() {
                 for (var i = 1; i < arrTmp.length; i++) {
                     var m = 0;//为了记录插入的位置，方便标记
                     //若第i个元素大于i-1元素，直接插入。小于的话，移动有序表后插入
                     if (arrTmp[i] < arrTmp[i - 1]) {
                         var x = arrTmp[i]; //复制为哨兵(临时变量)，即存储待排序元素  
                         var j = i - 1;
                         arrTmp[i] = arrTmp[i - 1]; //先后移一个元素 
                         //循环查找在有序表的插入位置，如果要插入的值小于，则继续查找，并将元素后移。
                         while (x < arrTmp[j]) {
                             arrTmp[j + 1] = arrTmp[j];
                             j--;
                         }
                         //查找完毕后，插入到正确位置（即要插入的值大于前面的元素）
                         arrTmp[j + 1] = x;
                         m = j + 1;
                     } else {
                         m = i;
                     }
                     //显示出来
                     for (var k = 0; k < arrTmp.length; k++) {
                         document.getElementById((i).toString() + k.toString()).innerText = arrTmp[k];
                         if (m == k) {
                             document.getElementById((i).toString() + (k).toString()).setAttribute("class", "redball");
                         }
                     }
                     document.getElementById((i).toString() + "8").innerText = "第 " + (i).toString() + " 趟排序";
                 }
             }
         </script>-->
 
         <!--7.css水平垂直居中（绝对定位居中）-->
         <!--<style>
             .container{
                 width: 500px;
                 height: 400px;
                 border: 2px solid #379;
                 position: relative;
             }
             .inner{
                 width: 480px;
                 height: 380px;
                 background-color: #746;
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 margin-top: -190px;
                 margin-left: -240px;
             }
         </style>
         <div class="container">
             <div class="inner"></div>
         </div>-->
 
         <!--8.css水平垂直居中（绝对定位居中）-->
         <!--<style>
             div{
                 width: 300px;
                 height: 300px;
                 border: 3px solid #555;
                 display: table-cell;
                 vertical-align: middle;
                 text-align: center;
             }
             img{
                 vertical-align: middle;
             }
         </style>
         <div>
             <img src="img/HBuilder.png" />
         </div>-->
 
         <!--9.css水平垂直居中（绝对定位居中）-->
         <!--<style>
             .container{
                 width: 300px;
                 height: 200px;
                 border: 3px solid #546461;
                 display: -webkit-flex;
                 display: flex;
                 -webkit-align-items: center;
                 align-items: center;
                 -webkit-justify-content: center;
                 justify-content: center;
             }
             .inner{
                 border: 3px solid #458761;
                 padding: 20px;
             }
         </style>
         <div class="container">
             <div class="inner">
                      我在容器中水平垂直居中
             </div>
         </div>-->
 
 </html>
以上就是CSS3 FLEXBOX轻松实现元素的水平居中和垂直居中的详细内容，更多关于CSS3 FLEXBOX轻松实现元素的水平居中和垂直居中的资料请关注九品源码其它相关文章！
相关热词： CSS3 FLEXBOX 轻松实现元素水平中和垂直居中
上一篇：html5写链接打开ios和android本地应用
下一篇：css实现分割线
文章分类

IT资讯 CMS教程服务器数据库前端开发后端开发工具使用其他教程
开发前端软件素材源码教程下载网站

CSS3 FLEXBOX轻松实现元素的水平居中和垂直居中

文章分类

最后更新

热门排行
