[分享]css3手机头部图标居中显示

在开发手机端的网页页面时，经常需要在头部加上一些图标，如logo、菜单按钮等。但是常常会遇到图标居中显示不了的问题，这时我们可以使用CSS3来解决。 首先，在头部图标所在的父元素中使用flex布局，如...

在开发手机端的网页页面时，经常需要在头部加上一些图标，如logo、菜单按钮等。但是常常会遇到图标居中显示不了的问题，这时我们可以使用CSS3来解决。
首先，在头部图标所在的父元素中使用flex布局，如下所示：

.header{
    display:flex;
    justify-content:center;
    align-items:center;
} 

这样就可以让子元素（头部图标）在父元素中居中显示了。
但是，如果我们希望图标能够在横向和纵向都居中显示怎么办呢？这时我们可以给图标元素设置下面的样式：

.icon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
} 

这里使用了绝对定位和transform属性来实现图标的居中显示。其中，top和left属性设置为50%可以将图标定位到父元素的中心位置；transform:translate(-50%,-50%)则是移动图标的位置，让图标能够真正的处于父元素的中心位置。
最后，如果你的头部图标需要在响应式布局下适应不同的屏幕尺寸，可以使用媒体查询来设置不同屏幕下图标的大小，在下面示例代码中，我为屏幕宽度小于600px时设置图标的大小为30px：

@media screen and (max-width:600px){
    .icon{
        width:30px;
        height:30px;
    }
} 

通过以上的CSS3技巧，我们很容易就可以实现手机头部图标的居中显示，并能够在响应式布局下自适应不同的屏幕尺寸。