レスポンシブサイト制作の際に角丸ボタンの配置がPCサイトではabsoluteで右上に設定しているのに、スマホサイトではabsoluteで下部中央だったのでちょっと悩みました。
そこでスマホサイトの角丸ボタンのCSS設定したメモ。
#news_link {position:absolute; top:auto; right:0; bottom:30px; left:0; width:100%; text-align:center;}
#news_link a { border-radius: 40px 40px 40px 40px; display: block; border: 1px solid #999; width: 200px; padding: 7px 0; text-align: center; font-size: 15px; margin:0 auto;}
ここでのミソは右と左のabsoluteが0であること(もちろん上下の中央をとりたいならtopとbottomを0にする)。
そしてmargin:autoをとっていること。
個人的にはあまり使うことない手法だったので、へ~と思った次第でした。
transform: translateで画面中央に配置するやり方もありますヨ。