元素水平垂直居中的css3实现实例代码

高洛峰

Lepaskan： 2017-03-27 10:14:47

asal

1486 orang telah melayarinya

这篇文章主要为大家详细介绍了元素水平垂直居中的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>

Salin selepas log masuk

则图片居中

Atas ialah kandungan terperinci 元素水平垂直居中的css3实现实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

css3

sumber：php.cn

Artikel sebelumnya：详解css3的弹性盒模型 Artikel seterusnya：详解CSS盒子效果

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang