元素水平垂直置中的css3實現執行個體代碼

來源:互聯網
上載者:User
這篇文章主要為大家詳細介紹了元素水平垂直置中的css3實現執行個體代碼,具有一定的參考價值,感興趣的小夥伴們可以參考一下

話不多說,代碼如下

<!doctype html><html><head><meta charset="utf-8"><title>伸縮布局</title><style type="text/css">*{  margin: 0;  padding:0;  -webkit-box-sizing: border-box;  box-sizing: border-box;}html,body {  height: 100%;}div{    height: 100px;    width: 100px;    overflow: hidden;     display:flex;     border: 1px dotted red;  align-items: center;  justify-content:center;}img{    width: 50px;    height: 50px;}</style></head><body>    <div><img src="http://img.mukewang.com/5365d7b10001e8d506350529.jpg" alt="" /></div></body></html>

則圖片置中

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.