結論から言います。
ブロック要素にwidth(100%未満)をかけていたら効くはずです。
インライン要素にmargin: auto;をかけている
【解決策】→インライン要素の親(ブロック要素)にtext-align: center;
プロパティがdisplay: block;ではなくdisplay: inline-block;
【解決策】→display: block;に記述し直して、widthの指定を入れる
marginをとれる領域がない
【解決策】→検証ツールで確認するか、width50%など幅の指定を入れてみる
なぜ効かないのか、以下で解説します。
そもそもmargin: auto;というのは、
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
の略ですよね。
上下左右autoですね。 上下左右autoなのですが、
margin-top: auto;
margin-bottom: auto;
はautoのとき0になります。
「なんでそうなるの?」
と聞かれても、こればかりはそういうものとしか答えられません。