网页布局与响应式设计技巧-优快云博客

本文介绍如何在网页设计中实现按钮水平居中、图片圆形居中、文字垂直居中，以及响应式布局的实现方法。通过CSS技巧，轻松解决布局难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现两个按钮水平居中显示：

让两个按钮分别作品有浮动，然后调节左右margin就可以

两个button标签，id为login和register：

　　#login{
　　 float:left;
　　 margin-left:20%;
　　 background: #1E90FF;
　　 }
　　#register{
　　 float:right;
　　 margin-right:20%;
　　 background: #79A84B;
　　 }

2.实现div或者img头像画成圆形并居中显示：

img标签的id为welcomeImg：

#welcomeImg{
　　    height:100px;
　　    width:100px;
　　    border-radius:50px;
　　    display: block;
　　 margin-left: auto;
　　 margin-right: auto;
　　    }

3.CSS图片水平垂直居中方法：

原文：http://www.cnblogs.com/zhangzhu/p/3958676.html

淘宝的方法

在曾经的"淘宝UED招聘"中有这样一道题目：

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

题目的难点在于两点：

垂直居中；
（1）下面是一个权衡的相对结构干净，CSS简单的解决方法：

//外层div盒子的样式：

.box {
 display: table-cell;
 vertical-align:middle;

 
 text-align:center;

 
 display: block;
 font-size: 175px;
 font-family:Arial;

 width:200px;
 height:200px;
 border: 1px solid #eee;
}

//里面img的样式：
.box img{ vertical-align:middle;}

（2）背景法

//最简单的方法莫过于背景法了，但不利于动态导入的图片

* {margin:0;padding:0;}
div {
    width:500px;border:1pxsolid #f00;
    height:500px;
    background:url("xxx.gif")center no-repeat
    }

（3）背景法2

//这种方法也很简单，但需要加一个的额外标签

//如果页面需要一两个居中的图片，那此方法是可推荐，但如果很多个产品的图，那加的标签数量可不是小数目了


<div class="qq"><i></i><img src="xxx.gif" /></div>

.qq {
    width:500px;
    display:table-cell;
    height:400px;
    text-align:center;
    vertical-align:middle;
    border:1px solid #000
}
i {
    display:inline-block;
    height:100%;
    vertical-align:middle
}
.qq img {
    vertical-align:middle;
}

文字垂直居中的方法：

//此方法也只适用于单行的文字，或者是图片+文字，通常可见于页面上的前面带有小图标的链接或标题等。

div{
    height:400px;
    line-height:400px;
    overflow:hidden;
    }

3.让body透明，并用html的背景图片做背景,用于在固定的背景下，滚动的视图：

  html {background-image:url('image/background/welcome.png'); }
  body {background-color:transparent;}

4.@media响应式布局技巧

有时需要根据不同的设备不同的屏幕尺寸设置不同的样式来调整布局，@media正好可以灵活实现：

比如：

@media screen and (min-width:1000px){

.font {font-size:36px;}

}

@media是语法标识，screen是对设备的选择，screen表示的是针对。。。的，and连接语句字段，括号里对尺寸进行筛选，min-width:1000px指的是当屏幕尺寸宽度大于等于1000px时应用下面的样式。

补充：media query中的not onlyall等关键字：
not: not是用来排除掉某些特定的设备的，比如 @media notprint（非打印设备）
only: 用来定某种特别的媒体类型。对于支持MediaQueries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备，这个应该经常看到
还有其它一些：

media_type	设备类型说明
all	所有设备
aural	听觉设备
braille	点字触觉设备
handled	便携设备，如手机、平板电脑
print	打印预览图等
projection	投影设备
screen	显示器、笔记本、移动端等设备
tty	如打字机或终端等设备
tv	电视机等设备类型
embossed	盲文打印机